Docs

[MadeOfStars]

Hello team,

I know this is probably the most asked question in the forums. Woocommerce stylizing limitation is probably the only con for your awesome theme.
Anyhow, I have almost tried every single shortcode to remove the products border, change the whole woocommerce background color with no luck. So I am starting to believe it’s not the code.
I have installed the child theme after I made few customization on the parent theme (do you think that’s the issue?). If not, is there any special place where I need to copy the CSS codes other than the Appearance>Custom>CSS?

I am trying to achieve the following on the renew theme:
1. Remove the product image borders throughout Woocommerce to look like this (http://www.the-greater-goods.com/)
2. Change the color of the sale triangle on products

Login credentials to follow:

Always appreciating your support.

[MadeOfStars]

This reply has been marked as private.

[Lely]

Hello There,

Thank you for giving us your admin credentials.

1.) To remove product border, please add this custom CSS:

.woocommerce .entry-featured {
    border: none;
}

2.)

.woocommerce .onsale{
    background-color: red; /*Change to your preferred color */
}

I did check custom CSS on Appearance > Customize > Custom > Edit Global CSS. You have CSS syntax error that’s why anything you have added at the end of it will not work. Please check the following CSS:

body .x-btn-navbar {
    background-color: transparent;
    box-shadow: none;
.entry-featured {
    border: none !important;
}

Update to this:

body .x-btn-navbar {
    background-color: transparent;
    box-shadow: none;
} /* This closing curly bracket is missing from your CSS*/
.entry-featured {
    border: none !important;
}

Hope this helps.

[MadeOfStars]

Lely, YOU ARE A STAR.

Can we also remove the border from the single product page?

P.S. Does that mean I am ok and can proceed with the development without resetting my settings for the parent theme?

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS:

.single-product .x-img-thumbnail {
border: 0;
background: none;
}

You should be good regarding your switching from child parent theme. You can apply CSS code in a few places, Appereance Customizer Custom CSS, Cornerstone Settings Custom CSS, style.css (this on the child theme, because on the parent theme it will be overwritten once the theme is update.

Let us know if you have any more questions.

Thanks

Joao

[MadeOfStars]

Thank you Joao,

The code removed the border as I wanted, but the problem is that the sale triangle on the top left is now not aligned with the image.
see here: http://orientaloriginal.ca/product/flying-ninja-poster/

Just to clarify regarding the child theme: To protect the changes from future update, I need to move all the CSS changes that I have made to the parent theme along with any new ones below the existing CSS on Appearance>Editor>X – Child Theme: Stylesheet (style.css)
Is that correct?

[Christopher]

Hi there,

Please add this :

.woocommerce div.product .images .x-img-thumbnail {
    padding: 0;
}

CSS won’t be overwritten during update. You can add it incustomizer or child theme’s style.css file.

Hope it helps.

[Author]

Posts