Move 'Add to basket' button on WooCommerce product card

[ChrisDeBruyne]

Hi team

I’m using the Integrity stack on Pro, and currently the ‘Add to basket’ button on a WooCommerce product only shows on hover, and it’s text only. Is it possible for this button to be a cart icon instead, and to move it next to or under the title of the product so that it’s always visible instead of on hover only?

Thanks

[ruenel]

Hello @chris31,

Thanks for writing in!

We are not sure how the button looks like or what stack are you using.
The usual add to cart button looks like this Icon stack for example:

• 

There is no option in the theme to be able to change the position or the icon of the add to cart button. You need to add CSS code into X > Theme Options > CSS .

The add to cart button of the theme has add_to_cart_button class, and it is using this css styling built in the theme’s stack style.css:

.woocommerce li.product .entry-header .button {
    position: absolute;
    top: -68px;
    left: 17px;
    right: 17px;
    margin: 0;
    padding: 0.45em 0.5em 0.575em;
    display: block;
    font-size: 14px;
    opacity: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woocommerce li.product:hover .entry-header .button {
    opacity: 1;
}

You need to modify the css above to override the current styling of the button and position it where you want it.

We are unable to provide CSS code for the customization as it is outside of our support scope. The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here

Best Regards.

[ChrisDeBruyne]

Hi @ruenel

Thanks for your response, will try modifying the css.

[jade]

You’re welcome, Chris.