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.
Related
I'm building an e-commerce with woocommerce and wordpress and everything is fine, but Today I discovered that there are some products where the description is not shown.
it's not a matter of conflicts or theme, I already made a full conflict test and nothing resolved.
an example of this issue:
https://tattoomarket.it/prodotto/adattatore-ad-angolo-rca/
an example of a product without this issue:
https://tattoomarket.it/prodotto/clip-cord-cavo-alimentazione-schuko/
Are you using elemento? Because it seems that "element" has his properties set to " display none".
Removing/changing that css element fixed the issue.
This is how it looked after changing it.
You can fix it just changing that propertie. An example.
elemento {
display: block;
}
You could also use this... it works for me.
#tab-description {
display: block !important;
}
But I would say that the best option is to changing it using the interface of Elemento.
I have a WooCommerce site built with the Avada Theme. I've attempted to make the image gallery 'sticky' on product pages. The idea is to make the Image Gallery scroll down alongside the short product description / add-to-cart section on the right column, which tends to be longer.
I saw a line of code on this article here, which helped work out the code for the Avada theme (I'm using Avada's image gallery instead of WooCommerce's):
.avada-product-gallery {
position: sticky!important;
top: 0!important;
}
Correct me if I'm wrong, but from what I get from the linked article, this line of code hereabove would work, but needs overflow:visible on the body or bigger container where the gallery is.
I am learning coding at the moment so I'm kind of fishy on the subject - with all respect to fish. I have tried to trace back the container where I have to add the overflow: visible!important, but it's resisting me, so I am kind of lost with the code at something like:
XXXXXXXXXX .XXXXX {
overflow: visible!important;
}
I leave you an example of a product page I'd like to change to see if someone can help me identify the container which I have to refer on code to change the overflow display:
https://architectoutlet.com/shop/gifts/gifts-for-science-lovers/ti-asia-blue/
I come up with .flex-viewpoint .product { ?? .Fusion-row .product {?? avada-single-product-gallery-wrapper avada-product-images-global avada-product-images-thumbnails-left ??
I am all ears and open to learning, so any tip on the matter is welcome!
Thank you
best regards to all :)
You can add your own custom javascript
.avada-product-gallery is your product page gallery class
jQuery(window).bind("load", function() {
var width = jQuery(window).width();
if (width > 767) {
jQuery(".avada-product-gallery").stick_in_parent({offset_top:60});
}
});
Tested & It's working from my end.
Thanks in advance
By default on the right side of single product it shows sidebar. The point is that we need side bar only on the Shop page where are located all products. It includes all filters as well as rated products. But on the single product description page we want to remove right side bar. Because in that page it shows only rated products in sidebar. It was there by default. Is there any way to remove it from that page?
This solution i create in 2021 works very good (sorry my english)
/*Single product page no sidebar*/
#blog #sidebar {
display: none;
}
#blog .col-md-push-3 {
left: unset;
}
#blog .col-md-9 {
width: 100%;
}
put this code in main page css code
Visit https://rgrepairofice.ddns.net/loja/gta-v
to check result, if you like it do what i said above
Gaspar Pereira, from rgrepairofice
Currently in the file templates/single-product.php the sidebar is called
/**
* woocommerce_sidebar hook.
*
* #hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
Therefore you can remove it with remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10); or wrap it to make sure it only affects single product pages:
if ( is_product() ) {
remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
}
Here is the documentation for other conditional tags if you need to get rid of it somewhere else and it uses the same action: https://docs.woocommerce.com/document/conditional-tags/
It all depends on the theme that you are using, as sometimes there is even an option in the theme options or the Customizer for changing layouts to different pages.
Through code, you could probably replace the single-product.php with a page template file that has no sidebar and then reinsert the missing WooCommerce tags, so that WooCommerce does it's magic on the page.
You could try going to [project-name]/wp-content/themes/[theme-name]/woocommerce/single-product.php and look for this line:
do_action( 'woocommerce_sidebar' );
And remove the line or comment it out.
You can also remove the sidebar with CSS only and not touching the PHP files if you don't want to!
For example the following simple CSS codes work like a charm with the Storefront theme (currently that I'm writing this, the theme version is 4.1.0)
.single-product #primary {
width: 100%;
}
.single-product #secondary {
display: none;
}
You won't be able to accomplish this by default with WooCommerce and WordPress. However, it's easy to accomplish if you're not looking to dive into code. A popular choice is Widget Visibility by Jetpack. If you're looking to dive into code, I recommend asking a new question with more details on what you tried to do already.
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.
I have installed wooCommerce plugin in WordPress, then activated the "Twenty Thirteen" theme and have added 4 products.
Does anybody please know how to fix the problem, that the products are show too close and their "Add to basket" labels overlap (at least in Russian language, here fullscreen)?
I have tried different widget configurations, like removing the basket from the right side - this doesn't help.
If needed, I'm comfortable with editing JS, CSS and PHP files - but don't know WordPress well.
There are many ways that you could fix this layout issue, but here's a quick fix for you.
Add this to your css:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-width: 220px;
}
This isn't a perfect solution, and a look at your actual image sizes and desired output would help to make this work better, but this will fix your issue.
Another possible solution is to use the shortcode in the template file for your shop and limit the output to 3 columns.
<?php echo do_shortcode('[products ids="1, 2, 3, 4, 5" columns="3"]');?>
As mentioned in another answer, to directly change the number of columns without creating a custom template for the shop page:
add_filter( 'loop_shop_columns', function() { return 3; } );
Add this to your functions.php file within your theme.
To change the number of products per row use loop_shop_columns filter.
/* functions.php */
add_filter( 'loop_shop_columns', function() { return 3; } );
But that still will not solve the problem, you will probably have to override WooCommerce styles for button and product list elements ( note that first and last elements in the row have specific CSS classes 'first' and 'last' ).
This is what I did to move the products apart.
Add this to your css:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
padding: 15px;
}