Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Wordpress/Woocommerce CSS Newb Styling Questions

Posted on 2014-10-26
5
Medium Priority
?
393 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 1000 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 1000 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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

721 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