Change Styling of Product Button & Reduce Gap Under Products

Hi, I’m using your theme with WooCommerce and there are a couple of things I can’t figure out the CSS for!

  1. On the Home page, I’ve used a shortcode to display products from one category, but there’s a big gap at the bottom of them and I’ve tried to reduce it with CSS, but nothing happens!
  2. Also, for the same products as mentioned above, I want to change the font and the font size etc for the button, but again I’ve tried with CSS but nothing happens to it!

I’ve uploaded screen grabs to show what I’m trying to change and I’ll include the URL in a secure note as it’s being built on a temporary link.

Hope you can help!

Thanks!

Hi there,

To reduce the gap of the products to the button, please add this code in the Element CSS option of the text element that contains the product shortcode:

$el .woocommerce li.product {
	margin-bottom: 10px;  
}

$el .woocommerce li.product .entry-header .button {
    font-size: 16px;
}

In case you are not seeing the same options, please enable the Advanced Mode option.

Hope this helps.

Hi, thanks for the CSS to reduce the size of the gap!

With regards to the button styling, I already had the User Preferences set to ‘Advanced Mode - Always On’ (through the X Settings on the dashboard), but I don’t get the full styling options for the buttons.

Cheers

Hi there,

You should see these options for button when you have the advanced mode enabled:

If you are still not seeing these options, please check the Permissions Manager for the v2 buttons and make sure you have all the access.

Hope this helps.

Hi, I’m not too sure if you’re thinking I want to change the styling of the button that’s under the products, but that one’s fine, it’s the button that appears when you hover over the product that I want to change the styling on.

Sorry for any confusion.

Thanks!

Hi there,

Thanks for clarifying.

To do that, you can still add this code to the same element CSS:

$el .woocommerce li.product .entry-header .button:hover {
    font-weight: bold;
    color: #fff;
}

Feel free to add more CSS styles in the code.

Hope this helps.

Hi, I’ve used the CSS you suggested and added a few lines of my own, but it hasn’t changed the button in any way! Here’s the code I’ve used:

  $el .woocommerce li.product .entry-header .button:hover {
  font-weight: bold;
  color: #fff;
  text-shadow: none;
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}

Cheers

Hi There @core365

Remove $el from your CSS rule and see if that helps.

Thanks!

Yep, that sorted it!

Thank you!!!

Glad we could help.

Cheers!

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