Problem with product display.

Hello,

I configured the products I want to appear on my site’s home page. But when one of them is sold out and left out of stock, the page becomes unconfigured with some “holes” that should not exist.

It does not stay the way it was before, with 4 products per row …

How can I solve it?

Tks,

Lucas.

Hello,

Could you please check how it works with some default WordPress theme like twentysixteen to understand is it our theme issue or not?

Regards

Yes,

I did the test with staging using another theme, and it looks be with Basel Theme.

At staging the product that do not have at stock do not sho, but it do not cause any kind of interference at others products display like with Basel theme …

Tks,

Lucas.

Please, send us some screenshots, links where we can see the problem and your admin access so we can compare how it should work with default WordPress theme.

Thank you

Ok, here is the print explaining the problem …

I wait your reply …

Tks!

Attachments:

You must be logged in to view attached files.

Try to edit the file basel/inc/shortcodes.php and customize the function basel_shortcode_products(); as shown on screenshot http://prntscr.com/jwress

Add the following code

if ( 'yes' === get_option( 'woocommerce_hide_out_of_stock_items' ) ) {
	$args['meta_query'][] = array( 'key' => '_stock_status', 'value' => 'outofstock', 'compare' => 'NOT IN' );
}

Hi,

I don’t know how to do it … is possible you send me this php file? Is it a theme issue?

Tks,

Lucas.

Hello,

Enter your theme folder via FTP www/wp-content/themes/basel/inc/shortcodes.php upload this file, add the code, save and upload in the same place.

Best Regards

Is possible to do this at child theme? To do not have problem with nexts updates…

Tks

Firstly, try to check this solution. If it will work, you will be able to copy the whole PHP function for products element to the child theme functions.php file.

Hi,

I dint try to add the code you suggested because I’m not developer and I was fixing it adding new products when some one was sold.

But today I discovered that this problem happen at tablet to … even I have 8 products:

– At desk 4 products / line.
– At mobile 2 products / line.
– At tablet 3 products / line.

At tablet this brakes line happen, even I have all products …

How can I solve it? Will it be fixed at update?

Tks,

Lucas.

Only to complete the explication:

– This issue is not related with products that are out of stock like before.
– The visual “problem” is the same, but to tablet vertical display.

How can we solve both problems? Out of stock products display and tablet products display?

Will it be solved in a future update?

Tks,

Lucas.

But you just need to add a few lines of code to check if it can be fixed or not. We can’t include it in our theme update while we don’t know if it worked or not.

Hi,

And it’s not possible to do a test at your side?

I understand that it’s just a few lines, but I don’t know how to do it.

I’m not developer …

Did you understand that are 2 different situations that cause the same issue with layout?

Tks!

We don’t have this problem on our side so we can’t test this solution.

Did you simulate the problem at your side?

I can send you the staging access for you test it.

Could be?

Tks

We don’t have this problem and can’t check it on our side. Send us your FTP access and we will try to add the code for you.

Hi, tks for your reply…

Ok, I will send the URL.

Are 2 deferents problems that cause the same visual issue:

1- If a product from fist block “QUERIDINHOS” is out of stock, its changes the new products block “NOVIDADES”.

2- The same thing happens at tablet, because its 3 products line, and this broke at first block “QUERIDINHOS”changes the other products block “NOVIDADES”, even there is no product out os stock at fist block.

Tks!

Lucas.

You need to use our theme’s Products element instead of default WooCommerce one.

Hi,

How can I do this?

Tks

Just use our Products (carousel or grid) WPBakery element for products instead of your current one.

How can I select each product I want to display at this?

You can set “List of IDs” and write down your products by name https://gyazo.com/cebb347ed16de44f4de0a1d409190106

How can I keep the price layout like before?

Attachments:

You must be logged in to view attached files.

When I chose this theme options the price stays different at home and on the rest of site …

If be possible, I would like to show it like before and like the rest of site …

Tks

Hello,

Please add this code to Theme settings > Custom CSS:

.basel-hover-standard .amount {
    font-weight: 800 !important;
    font-size: 22px !important;
    color: #53c57f !important;
}
.woocommerce .wc-simulador-parcelas-parcelamento-info.no-fee, .woocommerce .wc-simulador-parcelas-parcelamento-info.fee-included {
    display: block;
    font-weight: normal;
    font-style: italic;
    font-size: 16px;
    color: #828282;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
}

.woocommerce .wc-simulador-parcelas-parcelamento-info .woocommerce-Price-amount.amount {
    color: #38383e !important;
}

Best Regards

Hi,

I have added it but still with the same layout …

Hello,

Please try this code:

.basel-hover-standard .amount {
  font-weight: 800 !important;
  font-size: 22px !important;
  color: #53c57f !important;
}
.wc-simulador-parcelas-parcelamento-info.no-fee, .wc-simulador-parcelas-parcelamento-info.fee-included {
  display: block;
  font-weight: normal;
  font-style: italic;
  font-size: 16px;
  color: #828282;
  margin-top: 5px !important;
  margin-bottom: 20px !important;
}
.wc-simulador-parcelas-parcelamento-info .woocommerce-Price-amount.amount {
  color: #38383e !important;
}

Best Regards

Perfect!

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts