Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 403
  • Last Modified:

Wordpress/Woocommerce CSS Newb Styling Questions

Newb CSS questions here, been searching for solutions on the web for awhile now, still unable to find exactly what I'm looking for although I know it must be out here. Will continue to look after I post here.

1) How can I create a new class to style the "Add to Cart" button?

Trying to separate the "Add to Quote" button styles between the product grids on the home page and the single product page. I'm not sure where how/where to create another button class that will only be used on the single product page. Let me know if I'm being clear or not.

2) Which CSS rules to apply to allow quantity ticker and "Add to Quote" button to rest on same line?

product grid screenshot
I've just added a quantity ticker to the homepage's product grid. I'd like both the Green "Add to Quote"and Quantity ticker to rest on the same line with the same height. I've been messing with the CSS in Inspector (firefox) and can't seem to figure out what CSS needs to be applied.

Any help appreciated.
0
doug s
Asked:
doug s
  • 2
  • 2
2 Solutions
 
Jason C. LevineNo oneCommented:
1) How can I create a new class to style the "Add to Cart" button?

By editing your theme's CSS file (style.css) and adding new rules to it.

2) Which CSS rules to apply to allow quantity ticker and "Add to Quote" button to rest on same line?

There's no way to tell from a screen shot.  You would have to right click in the browser and choose Inspect Element from the menu to see the CSS and from there you would know what to do.  My guess is the style on the Add a Quote button is set to expand the element to the full width of its container.  You would probably want to change that to 50% width and then float it right.  Similarly, the quantity box needs to be either floated left or wrapped in a container and floated left.  That would probably get both elements on the same line.
0
 
doug sAuthor Commented:
Apologies I forgot to provide a link:

http://allaboutevents.dougswarts.com

1) How can I create a new class to style the "Add to Cart" button?
"By editing your theme's CSS file (style.css) and adding new rules to it."

I'm confused how/where I would reference this new button to replace the current Add to Cart button. I'm guessing it's somewhere in the single product template woocommerce file, I just don't know how to apply it.
0
 
Jason C. LevineNo oneCommented:
I'm guessing it's somewhere in the single product template woocommerce file, I just don't know how to apply it.

It doesn't matter where it is as much as how it's called.  You should be able to override the style by applying other styles in style.css or by installing a plugin that allows you to specify new styles.  Jetpack, for instance, has a Custom CSS module that will be the last rule set called. This is why you need to learn how to inspect elements.  The browser will tell you what you need to know.

So the button class appears to be embedded directly on the page by the theme.  Not sure why your theme is doing that but figure you will need to edit header.php or some setting in the theme to alter it further.  The Quantity Box style is set in WooCommerce:

http://allaboutevents.dougswarts.com/wp-content/themes/route/css/vendor/woocommerce.css
0
 
William NettmannCommented:
You can add this to your stylesheet:

.woocommerce .quantity, .woocommerce-page .quantity {
position: relative;
width: 70px;
float: left;
}
button.alt {
width: auto!important;
float: right;
}

That will achieve what you want on that specific page, you may need to make adjustments if other elements on the site are affected.
0
 
doug sAuthor Commented:
Thank you Jason and William! Apologies for my ignorance. I understand how to use inspector and reference new rules in the style sheet. I found there is already a class that specifies the single product page button. My question was if there was only one class that referenced all the buttons, where would I make the alternation in the page's HTML or in this case the single product page.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now