Woocommerce-shop-appearance-customization

Support
#1

Hi,
I’m still having some problems editing the woocommerce shop appearance. I have read the old topic, which now is closed.
But there are still some issues.

I have created a product category page (as a start page in the shop).
I generally have black as background.
But this page has squares for each product category and the background is whitw and there is a yellow background of the no._of_products_in_the_category-text.

  1. How do I get the background in the square black.

  2. How do I get rid of the yellow background of the number-text?

  3. The thumbnails in the product page have white background. How do I get a black background with white icon and whithe border?

  4. In the cashier, at the bottom, there is a square with payment info (Bank transfer and Paypal), How do I get a black background with white text for that?

Best regards,
/Fredrik

#2

Hi Fredrik,

Thank you for writing in, please add the following to Theme Options > CSS

/*remove the background-color of category title and product count*/
.woocommerce li.product,
.woocommerce mark.count {
	background-color: transparent;
	color: #fff;
}

/*white border on each product on product list page*/
.woocommerce .cols-4 li.product,
.woocommerce.columns-4 li.product {
	border: 1px solid #fff;
}

/*add to cart button styling*/
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce #respond input#submit.alt {
	background-color: #000;
    border: 1px solid #fff;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Regretfully, the Paypal gold button is 3rd party widget and we cant apply a styling on it.

You need to modify that on your widget code.

https://developer.paypal.com/docs/checkout/how-to/customize-button/#button-styles

Cheers!

#3

Many thanks, with the Chrome browser Developer Toolbar I’m able to fix all the small bugs.
I was looking for the a.entry-parent and a.prev & a.next, which I easily found!!!
Great !!!

/Fredrik

#4

Glad we were able to help :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.