WooCommerce display

[goalsarecool]

As it relates to all product previews here: https://goalsarecool.com/shop/

How can I remove the border, white background, and center the text?

Also, as it relates to individual product pages such as: https://goalsarecool.com/product/goals-are-cool-mug/

How do I get the product image to appear under the main product image vs. at the top of the main image?

Thanks!
Blake

[lely]

Hi Blake,

For adjustment like this, feel free to use browser dev tools to check active style/css and then adjust accordingly.

From checking, I can see you have achieve the first one using the following custom CSS:

.woocommerce li.product .entry-wrap {
    Padding: ;
    Background-color: transparent!important;
    Border: 0px solid #ffffff!important;
    text-align: center;
}

Let’s just adjust it:

.woocommerce li.product .entry-wrap {
    background-color: transparent !important;
    border: 0px !important; /*Since it is 0 no need to specify border color and type*/
    text-align: center;
}

For the next one, do you mean adjust those thumbnail position? If yes, see this: https://screencast-o-matic.com/watch/cb6tfwIWVS

.flex-control-nav.flex-control-thumbs {
    top: initial;
    bottom: 0;
}

Hope this helps.