[Darren GParticipant]

Hi,

Is there anyway to style the Product Name and Add To Cart which appears when you hover over a product on the ‘Shop’ page

At the moment the Styling on the font is in uppercase and the overlay is a horrible grey – I cant seem to find where these settings are?

Can I also ask how to remove the sidebar from the page layout – I have tried adding different layouts to the page – but it makes no difference – the sidebar is always present?

http://www.shampooheads.com/shop/

Thanks

[RupokMember]

Hi there,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

/* change text transform of title */

.woocommerce li.product .entry-header h3 a {
  text-transform: none;
}

/* change overlay color */

.woocommerce li.product:hover .entry-wrap::before {
  background-color: rgba(0, 0, 0, 0.5);
}

Note that it will be same as the default background color (non-hover state). So you can change the opacity level or use a different color code.

#2. You need to disable the sidebar globally from Customizer > Layout and Design > Content Layout. Then you can set sidebar template for the pages you want to show sidebar.

Hope this helps. Let us know if you still face any issue.

Cheers!

[Darren GParticipant]

OK, thanks again for the reply.

I am sorted for question 2 – Thank You.

Regarding Question 1.

I have put that code into the Custom CSS section and it has changed my font and hover state colour – however I cant see where to change the colour of the non-hover state on the product overlay?

Thanks

[RupokMember]

Hi there,

Thanks for updating. Kindly update your code to following :

/* change text transform of title */

.woocommerce li.product .entry-header h3 a {
  text-transform: none;
}

/* change overlay color */

.woocommerce li.product .entry-wrap::before {
  background-color: rgba(0, 0, 0, 0.3);
}

/* change overlay color on hover */

.woocommerce li.product:hover .entry-wrap::before {
  background-color: rgba(0, 0, 0, 0.5);
}

You can change the color to a solid hex color as well.

Hope this helps.

Cheers!

[Author]

Posts