I have a bookshop site in Wordpress, as per the image below. The alignment of the Add Cart button is not the same for the two products. Note that this is the shop page.
How can I align the Add to Cart Button to be the same for every product regardless of the product image size and product title length?
I'm using:
WordPress 4.3.1
WooCommerce 2.4.11
THEME - > VantageVersion: 1.4.4 By SiteOrigin
First, your question is very, very vague. It's hard to troubleshoot with far more information. However, I will try and get the conversation started.
What list is this? Home page? Category page?
Essentially, you've got to "normalize" the space that the title takes up. Notice that in the second product, the title of the product is two lines, where the first product is only a single line. Will any of your products have three lines? Four lines? Five? That is essentially the issue.
Further, depending on your theme, this could be completely different markup / code.
With ALL of that being said, the issue can be resolve simply with the right css. For a "typical" WooCommerce site, this would take care of it:
In your stylesheet, declare this style on this selector:
ul.products li.product h3 {
min-height: 50px; /* NOTE: This amount will have to change depending on how many lines you want to support. Allow about 20-25px per line */
}
I Added this code under the theme's style.css
.archive #main ul li a h3 {
min-height: 70px;
}
Solved my problem.
Related
I'm using WooCommerce with a Virtue theme. For the last few months I have used Polylang translation, and only recently updated to WPLM. I do not know it's what caused it but the products suddenly became too close to each other and they are even overlaping the page numbers on the bottoms of the page. I looked at Products are too close in wooCommerce with 2013 WordPress theme but this didn't help me.
Does anybody know how to fix the problem?
enter image description here
You can Change number or products per row to 3. use this code
add_filter('loop_shop_columns', 'loop_columns'); if (!function_exists('loop_columns')) {
function loop_columns() {
return 3; // 3 products per row
} }
I think it will work for you
It's hard finding what causes your problem without looking at your codes. But WooCommerce products are usually listed using the "li.product" class. Adding the following code to your stylesheet can help you adjust the margins of your products.
li.product {
margin-right: 2em;
}
If that doesn't work try this:
li.product {
margin-right: 2em!iimportant;
}
Let me know if this helps.
I've searched around for a good while now trying to find a solution for this issue, but haven't seen anyone else experiencing it so far.
I have a WooCommerce store I'm working on developing, and recently noticed that the select field for the billing state is displaying list-style type bullets in front of the options when expanded.
I've messed around in the CSS including removing any background image and making sure there was no list-style attribute applied to the options, but I'm stuck on as to what's happening here.
The issue can be viewed live at this link: http://grahams.staging.wpengine.com/donate/
Does anyone have any ideas on what could be causing this? My guess is it's somewhere in the woocommerce files but I'm unsure as to where I would start looking.
List of Woo Extensions:
One Page Checkout
Name Your Price
WooCommerce Subscriptions
WooCommerce Variation
Swatches and Photos
Other than the above, no customizations have been made. Theme being used is Hybrid.
EDIT: adding an image for those who can't load it/are looking after it's been resolved.
Inspecting your CSS, there is a background image being applied to all ul li elements. See _elements.scss, line 96.
ul li { background: url(images/build/bullet.png) no-repeat 0 6px; }
Adding the following style fixes the issue.
.select2-results__option { background-image: none; }
Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.
I have a woocommerce website and I want to show 2 products per row on the shope page as well as on the homepage when viewing the website on mobile or short screen. Write now it is only showing 1 product per row. Link to the website www.obscot.com
you need to define your mobile width in CSS in your style.css and need to add the rule something like this
#media(max-width:767px){
.entry-content .products li {
float: left;
width: 50%;
}
}
and it will look like this
http://prntscr.com/f2uiq2
Thanks
First please check that the theme in your site is having facility to change it. If not then use below.
https://docs.woocommerce.com/document/change-number-of-products-per-row/
https://wordpress.org/support/topic/woocommerce-change-products-per-row-based-on-screen-size/
I'm running woocommerce under the wootique wordpress theme. Here's a link to my site.
Since Paypal is the only payment processor, I wanted the text under the paypal button to be more 'prominent'. Bigger font size, maybe a different colour.
I tried adding the following code to my CSS, but that didn't change anything, even with the !important tag:
#payment .payment_box p {
font-size:16px;
color: #ee4122;
}
According to Firefox that is the right element and even editing the ul.payment_methods .payment_box p directly in my theme's style.css doesn't change anything.
I seem to be stuck. I'd really appreciate it if anyone could take a quick look (you may have to add the item to your cart for the checkout page to show up properly!)
Thank you in advance!
ul.payment_methods .payment_box p {
font-size:16px;
color: #ee4122;
}
This works for me. I do know that caching plugins can cause items to not visually update right away so you have to clear the cache from WP (not necessarily just your browser). I can see your other code in your stylesheet and it is applying (the margin on the ul.payment_methods .payment_box p).