Docs

[phoogoo]

Similar to this old forum post: https://community.theme.co/forums/topic/changes-in-the-product-pages/

I am looking to make some edits within the product page and could use some help identifying elements for custom css

– I would like to remove the border from the product box

– Change font color of the gray month, date, year (both month and mm) as well

– Change the font size of the Product Description without changing the Title font

– Resizing the image

A few examples would be helpful, but also just looking on what exactly to target to customize. I appreciate the help. It is a shame that cornerstone cannot integrate with Woo Commerce.

Here is the link: http://exploremauinature.com/dev/product/tour-1-option-1/

[Rupok]

Hi there,

Thanks for writing in!

#1, #2, #3 : You can add this under Custom > CSS in the Customizer.

.wc-bookings-booking-form {
  border: medium none !important;
}

.wc-bookings-booking-form fieldset label span {
  color: #000;
}

.wc-bookings-booking-form fieldset legend small {
  color: #000;
}

.wc-bookings-date-picker  legend {
  border: none;
  margin-bottom: 10px;
}

.woocommerce-tabs .x-tab-content p {
  font-size: 16px;
}

#4. How do you want to resize the image? Kindly clarify a bit.

Cheers!

[phoogoo]

Thank you so much and sorry in the delay!

I suppose just making the image smaller, just knowing what to target.

Can you tell me how to remove the smaller “Description” in the Product Description div on the bottom of the page? Additionally, I was hoping to maybe add a border-radius to it.

Again, thanks I may ask for more help here in a bit.

[Lely]

Hi There,

Please use the following CSS:

.woocommerce div.product .woocommerce-tabs .x-nav-tabs {
    display: none;
}
.woocommerce div.product .woocommerce-tabs .x-tab-content {
    border-radius: 10px;
}

Hope this helps.

[phoogoo]

Thanks, how about targeting the image to resize?

Appreciate it!!!

[Rue Nel]

Hello There,

Thanks for writing in! To target the images, you can make use of this code:

.woocommerce div.product .images img {
    // your styling here
}

And to have full control on the product images, please check out this topic: https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057

Hope this helps.

[phoogoo]

Thank you for the help. One last question.
I am noticing on my SHOP page: http://exploremauinature.com/dev/shop/
That I am unable to edit the title? When I go to edit page or even customize > woocommerce it is not easily visible.
Clearly I set it somehow, but I am at a loss (another sad downside to not having cornerstone featured here).

Also if you could help me out on changing the font color on that page from black to white as well, that would be helpful.

THANKS! You guys are very attentive.

[Rad]

Hi there,

It should be under Admin > Appearance > Customizer > Icon > SHOP OPTIONS

Cheers!

[Author]

Posts