Please let us know the proper way to display the text without breaking the theme’s accessibility.
Hey @leelahanuman
Just to confirm you want the Add to cart button to be full width in the picture? If yes, then can you share your store URL and Password (if enabled) so I can help you out.
Best,
Moeed
thank you , I added relavant css part .
product-card {
position: relative;
}
/* Full-width overlay button */
product-card .quick-add__button {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100%;
height: 44px;
border-radius: 0 !important;
justify-content: center;
opacity: 0;
pointer-events: none;
transform: translateY(6px);
transition: opacity .25s ease, transform .25s ease;
}
.quick-add__button[data-added=‘true’] {
width: auto !important;
min-width: 120px;
height: var(–button-size-md);
}
/* Reveal on hover */
product-card:hover .quick-add__button,
product-card:focus-within .quick-add__button {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Force text to show */
.quick-add__button .add-to-cart-text__content {
grid-template-columns: 1fr !important;
}
/* Remove Horizon blur + fade */
.quick-add__button .add-to-cart-text__content span span {
opacity: 1 !important;
filter: none !important;
translate: 0 !important;
}
/* Align icon + text */
.quick-add__button .add-to-cart-text {
width: 100%;
justify-content: center;
gap: 8px;
}
.quick-add__button .add-to-cart-icon
{
display: none !important;
}
It’s a Horizon family theme, so you can turn off “quick add to cart” and instead add a “Buy buttons” block at the bottom of your Card block in Collection Grid.