Hi,
I want to Customize the button on the shop page, but it seems weird.
1) Can I change the button which appears on the product picture from top left to middle of bottom part?
2) How do I make the words like “select options”, “add to cart”, “view product” from vertical to horizontal?
Hi F,
Try this CSS
.woocommerce ul.products li.product .product_type_external, .woocommerce ul.products li.product .product_type_grouped, .woocommerce ul.products li.product .product_type_simple, .woocommerce ul.products li.product .product_type_variable, .woocommerce-page ul.products li.product .product_type_external, .woocommerce-page ul.products li.product .product_type_grouped, .woocommerce-page ul.products li.product .product_type_simple, .woocommerce-page ul.products li.product .product_type_variable {
height: 50px;
width: 150px;
line-height: 4;
}
.woocommerce ul.products li.product:hover .button.add_to_cart_button {
left: 10px;
}
body.wcz-btns.wcz-woocommerce ul.products li.product a.button, body.wcz-btns.wcz-woocommerce .related.products ul.products li.product a.button, body.wcz-btns.wcz-woocommerce.single-product div.product form.cart .button, body.wcz-btns.wcz-woocommerce.wcz-wooblocks ul.wc-block-grid__products li.wc-block-grid__product .add_to_cart_button {
border-radius: 0;
background-color: white;
color: #000;
}Copy and paste it in Appearance -> Customize -> Additional CSS
Let us know if you have any questions
Best Regards
Tried. It’s still the same.
Hi F,
I can’t find the above CSS on the page when checked with the page inspector. Make sure you have pasted the code correctly and cleared all the cache
if you’re using any plugin
Let us know if this works out
Best Regards
Yup, mail us at support@spiraclethemes.com
Did you clear the cache. I can see you’re using the cache plugin.
Best Regards