Product grid page edit image width and adjust font-size

Hello,

On the category page of my products I want to change 3 specific parts. I formed this into 3 questions.
For these adjustments I use extra css via the WordPress customizer. See the whole code in “private content”.

Question 1.
I added a box shadow around the products and as you can see the product image touches the top edge of this box. I use this code for this part:

.product-grid-item{
background:#fff;
border-radius:0px;
margin:9px;
padding-bottom:17px;
box-shadow: 1px 1px 18px #efecec;
border-top-right-radius:5px;
border-top-left-radius:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

.product-grid-item .product-image-link img, .product-grid-item .hover-img img {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}

.woodmart-archive-shop .product-grid-item {
max-width: 31.33%;	
}

There is a white space between the left and right sides of the box, but I want the entire product image to be filled in width.
See the picture what I mean:

Question 2.
On this page I also want to increase the font size of the add-to-cart button. Somehow this doesn’t work. On the single product page I succeeded with an extra css code. But on this page I am using the following code:

.woocommerce .product .add_to_cart_button.button {
width:100%;
	margin-top:7px;
	height:50px;
	text-transform:none;
	font-size: 12px; /* DOES NOT WORK */
}

.woocommerce .products .product.outofstock .button {
width:100%;
	height:50px;
	text-transform:none;
}

But the font size always remains the same. It’s weird, because I can change the font-color, change font-family, text-transform, button color and width, but the font-size always stays small.

Question 3.
Is it possible to display a carousel on this where you can see other product photos by swiping?
See picture what I mean.

Thank you in advance.

Extra information:
– The above css codes have not yet been applied to the website. I test this through the WordPress customizer.
– I have translated the buttons via function.php with code:

add_filter( 'woocommerce_product_single_add_to_cart_text' , 'woo_custom_cart_button_text' );

function woo_custom_cart_button_text() {
return __('In mijn winkelwagen' , 'woocommerce');
}

// Change "Add to Cart" > "Add to Bag" in Shop Page
add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_shop_page_add_to_cart_callback' );  
function woocommerce_shop_page_add_to_cart_callback() {
    return __( 'In mijn winkelwagen', 'woocommerce' );
}

[Luke Nielsen]

Hello,

1. The below code will help you to fill the image in width.

.product-grid-item .product-element-top {
    margin-right: -10px;
    margin-left: -10px;
}

2. The button font-style I suggest you to change via Advanced typography functionality, or rather navigate to Theme Settings -> Typography -> Advanced Typography -> create a rule with the “Custom Selector” item and paste the below selector to the appropriate field after that, set the font as you want.

.product-grid-item .wd-add-btn .add_to_cart_button span

https://prnt.sc/d3O4pxNFYeeL

3. Sorry but there is no option in Theme Settings available for that. It requires customization and this is out of our theme support scope.

4. You can translate/change any text with the help of the Loco Translate plugin. Here is our documentation on how to use it:

https://xtemos.com/docs-topic/translate-woodmart-theme-with-loco-translate/

You can also reach out to us if you have any questions.

Kind Regards

• This reply was modified 2 years, 4 months ago by Luke Nielsen.

Hello,

Thank you for the reply. It worked with the image width in question 1, thank you very much!

I tried to create a custom typography, but unfortunately the same problem happens as before. The text can change font-family and color, but the size always remains the same.
Do you have any other suggestions for increasing the font size of this button?

Thank you in advance.

Hello,

Sorry, I have edited the above custom selector and now it should work as it should. Please replace the old selector with the new one and check the issue again.

https://gyazo.com/d4c39942eb36f1f1265cd22fca6ad767

Kind Regards

Thank you very much, it worked! The out of stock products have remained unchanged and therefore still have the old font size.

It is also useless to use a button for out of stock products. Do you have a code or a way to change the “Out of stock” button to a simple text with background? See example below.

[Luke Nielsen]

Hello,

1. I have fixed it, for now, all buttons accept styles.

https://prnt.sc/KRIsYDNdogNc

https://prnt.sc/K-bJ_igqwzDJ

2. Sorry but there is no option in Theme Settings available for changing the text only for the out of stock products.

The below code will help you to make the square buttons with another background for the out of stock products. Paste this code to the “Global custom CSS” area or in the “Custom CSS for desktop” area in Theme Settings -> Custom CSS.

.product-grid-item.outofstock .wd-add-btn .add-to-cart-loop {
    border-radius: 0;
    background-color: #741e1e;
}

Kind Regards

• This reply was modified 2 years, 4 months ago by Luke Nielsen.

Thank you! Good suggestion to make the buttons square. Is it possible to change the font size of only the out of stock buttons? It would be nicer if it was made a little smaller.

Hello,

Yep, just create the rule in the “Advanced typography” with the .product-grid-item.outofstock .wd-add-btn .add-to-cart-loop selector.

Feel free to reach out to me anytime when you have anything more to say.

Kind Regards

[Author]

Posts