Solved

Wordpress/Woocommerce CSS Newb Styling Questions

Posted on 2014-10-26
5
332 Views
Last Modified: 2014-10-27
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
Comment
Question by:doug s
  • 2
  • 2
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
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
 
LVL 4

Author Comment

by:doug s
Comment Utility
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
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 250 total points
Comment Utility
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
 
LVL 12

Accepted Solution

by:
William Nettmann earned 250 total points
Comment Utility
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
 
LVL 4

Author Comment

by:doug s
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now