Solved

Wordpress/Woocommerce CSS Newb Styling Questions

Posted on 2014-10-26
5
384 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40405447
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
ID: 40405449
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
ID: 40405465
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
ID: 40405832
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
ID: 40407734
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

617 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