Problem with update of elementor : products page and single product page

Hello, @denis,

Thank you for reaching out to us. We sincerely apologize for any inconvenience you have experienced due to the issue with our theme.

To ensure that you are utilizing the most current versions, please confirm that you have updated to the latest release of the Theme, Core plugin, and Elementor plugin. Once you have verified this, it is crucial to apply the patch available at the following link: https://prnt.sc/StJjkYFFQ_u2 If you have not yet applied the patch, we kindly ask you to do so and then re-evaluate the situation.

Should the problem persist even after applying the patch, we would appreciate it if you could provide us with your site’s WP Admin URL and credentials, as well as the FTP login details. This information will enable us to investigate the issue more thoroughly on your site and offer the necessary assistance.

We are committed to resolving this matter to your satisfaction and look forward to your prompt response.

Best regards,
The 8Theme Team

Hello Denis,

Thank you for reaching out and for providing the necessary access details via private message.

We have investigated the issue you reported regarding the conflict between product stock and sold products. We’re pleased to inform you that we have successfully implemented a fix in the code, which has resolved the discrepancy. As a result, both the shop and single product pages should now reflect the correct information and function normally.

To proceed further to check the other issues, we kindly request that you elevate the provided account to the administrator level. This will grant us access to the WordPress dashboard, allowing us to ensure that everything is running smoothly and to make any additional adjustments if necessary.

Please let us know once the account has been updated to administrator status, and we will take the necessary steps from there.

Best Regards,
8Theme’s Team

Dear Denis,

We hope this message finds you well.

We applied the HOTFIX to your website under functions.php line 7:29 file locates in your child theme directory:

function etheme_wc_get_availability_class( $class, $product ) {
	$stock_quantity = $product->get_stock_quantity();
	$stock_class    = 'step-1';
	$already_sold   = get_post_meta( $product->get_ID(), 'total_sales', true );

	if ( $product->is_in_stock() ) {
        if ( ! empty( $stock_quantity ) && (int) $stock_quantity > 0 && get_option( 'woocommerce_manage_stock' ) ) {
            $already_sold     = empty( $already_sold ) ? 0 : $already_sold;
            $all_stock        = ($stock_quantity + $already_sold) > 0 ? ($stock_quantity + $already_sold) : 1;
            $stock_line_inner = 100 - ( ( $already_sold * 100 ) / $all_stock );
            if ( $stock_quantity <= get_option( 'woocommerce_notify_low_stock_amount' ) ) {
                $stock_class = 'step-3';
            } elseif ( $stock_line_inner > 50 ) {
                $stock_class = 'step-1';
            } else {
                $stock_class = 'step-2';
            }
        }
	    $class .= ' ' . $stock_class;
	}
	
	return $class;
}

“– I install the patch but after couple of minute and hours, it’s appear again..”
> We applied the path, we can’t see any issues on your website now.

We have conducted a thorough review of your Loco Translate plugin and have identified an issue denoted by the error message “net::ERR_HTTP2_PROTOCOL_ERROR 200 (private content).”

Our analysis suggests that this problem is associated with your hosting environment. Therefore, we kindly recommend that you reach out to your hosting provider for further assistance in resolving this error.

– Which plugin of cache, you advice too use ?
> We suggest you to try with WP-Rocket plugin: https://wp-rocket.me/

– On all website, the logo of twitter (X) was the old one. How I can change it ?
> Please add the following custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

.et-follow-buttons a.follow-twitter i,
.et-socials [title="Twitter"] svg {
    opacity: 0;
}
.et-follow-buttons a.follow-twitter,
.et-socials [title="Twitter"] {
    background: url(https://img.freepik.com/free-vector/twitter-new-2023-x-logo-white-background-vector_1017-45422.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

– For a product write sold out (“rupture de stock”), what is the part i should change or CSS code to replace this text by an image “sold out” (with same background as actually). You can see in the image repertory that i download on my website, it’s the last one i want to add.
> Please try with this custom CSS:

.woocommerce p.stock.out-of-stock {
    text-indent: -9999px;
    min-width: 120px;
    background: url(https://soldart.fr/wp-content/uploads/2023/12/logo-SOLDOUT-250.png) no-repeat center center;
    background-size: 100%;
}

– On the main products page, user can change the view to 20, 24, 36 and all.
I use infinite scroll, so it’s not necessary to see this parameter on computer and mobile. How i can delete this without delete all toolbar ?
> You can hide it by this custom CSS code:

.woocommerce .products-per-page {
    display: none;
}

– on the mobile phone, when you place your finger on a product, you don’t see small presentation (add to cart, whislist, compare, view) like you can see on the product of the home.
How I can change this parameters ?
> Please navigate to XStore Theme Options > WooCommerce Shop > Shop > Product Design > check on Hover buttons on mobile:

https://prnt.sc/bp1M9vhWBBzO

– On the single product page (only on this page), how I can center the breadcrumbs ?
> Please add this custom CSS:

.single-product .bc-type-left2 .a-center {
    text-align: center;
}

– On the single product page, how I can add space and manage space in section3, between “connection block”(whislist, compare) and “sharing” and “custom html 2” ?
Same question, for “short description” and “prix” and “ajouter au panier”

– On the single product page, there is lot of space on computer view between first part (“payment securise”) and tabs (livraison, paiement..). How I can reduce it ?
> You can control the margin/padding for each section under Single Product Builder:
https://prnt.sc/R8X8oFUOyTNv

– On the single product page, I want to change title of tabs “Informations complémentaires” (review)by “Résumé”. Where I can change them, I can’t find them ?
> Please add the following code to functions.php file in your child theme:

/**
 * Rename product data tabs
 */

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
	$tabs['additional_information']['title'] = __( 'Product Data' );// Rename the additional information tab
	return $tabs;
}

– On the wishlist and compare page, there is a large space between title and the other part below. How I can reduce it ?
> Please add this custom CSS:

.page-id-37583 .page-heading.bc-type-left2.bc-effect-text-scroll.bc-color-dark {
    margin-bottom: 0;
}
.page-id-37583 .container.content-page.sidebar-mobile-bottom {
    padding-top: 0;
}

– On the whislist and compare page, on mobile view, the title is very big, how I can reduce
– On the whislist and compare page, on computer view, the title is small, how I can reduce
> They can be changed under Theme Options > WooCommerce Shop > Wishlist/Compare > Wishlish/Compare Header > Breadcrumbs: https://prnt.sc/fvYrCDHobl7q

– On the whislist page, how I can center the title (produits, en stock, …) ?
> You can try with this custom CSS:

@media (min-width: 980px){
    table.xstore-wishlist-table tr th {
        text-align: center !important;
        max-width: 100% !important;
        display: table-cell;
    }
}

– On the whislist page, how I can delete sharing social media part at the bottom ?
> Please try with this custom CSS:

.xstore-wishlist-share {
    display: none;
}

– For all the process : cart to end, on computer view, the logo isn’t in the middle of white page, how I can change it ?
– How to delete the “SKU” information ?

> You can try with this custom CSS:

.woocommerce-cart .et_element.et_b_header-logo.align-start.et_element-top-level {
    text-align: center;
}
.woocommerce-cart .woocommerce-cart-form__contents .product-sku.mob-hide {
    display: none;
}

– when I want to calculate shipping cost, I select country, but price doesn’t change.
I don’t know what happen..
> Please make you already setup correctly the shipping zone, … https://woo.com/document/setting-up-shipping-zones/

– Only on mobile view, I see “votre commande” part, at the bottom, I want to delete it all this box.
> Please try with this custom CSS:

@media (max-width: 480px){
    .woocommerce-checkout .checkout-columns-wrap .col-md-5 {
        display: none;
    }
}

We regret to inform you that some requests from your are not possible to achieve your desired outcome with the current version of the theme. Item support does not include services to modify or extend the item beyond the original features, style, and functionality described on the item page and you request additional customization.

Our high-level developers are equipped to provide you with a tailored solution for this. To get a precise estimate and discuss the customization, please submit a customization services request, and we will prepare a detailed estimate for the cost – https://www.8theme.com/account/#etheme_customization_panel (8Theme’s Customisation Services)

We appreciate your understanding.

If you have any more questions or need additional support, please don’t hesitate to ask.

Best regards,
The 8Theme Team

– I asked you if i can apply new update (elementor 3.18.2) without problem, you advice me to do or wait ?
– About the patch, i see it again, ask me to install : in my wordpress >> XSTORE >> Patcher
Very strange to see this, maybe an mistake from elementor ?
>>> You can update the Elementor to the latest version. For the path you just need to apply once then wait for the next update of XStore theme.

– On all website, the logo of twitter (X) was the old one
>> Thank you, it’s work well with other logo i customize and upload on my website.
On sharing part, like single product page, the old logo is still alive.
Which CSS code i should apply ?
>>> Please update the custom CSS to:

.et-follow-buttons a.follow-twitter i,
.et-socials [title="Twitter"] svg,
.et-socials [data-tooltip="Twitter"] svg {
    opacity: 0;
}
.et-follow-buttons a.follow-twitter,
.et-socials [title="Twitter"],
.et-socials [data-tooltip="Twitter"]{
    background: url(https://img.freepik.com/free-vector/twitter-new-2023-x-logo-white-background-vector_1017-45422.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

– For a product write sold out (“rupture de stock”), what is the CSS code to replace this text by an image “sold out” (with same background as actually).
>>> Thank you for CSS Code, it’s work well, but not satisfy by the result.
I prefer to see the main pictures product in black (grey)/white color for product sold out, on all page except single product page. What is the CSS code i should apply ?
>>> Please use this custom CSS code instead:

body:not(.single-product) .product.outofstock .product-image-wrapper img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
body:not(.single-product) p.stock.out-of-stock {
    text-indent: -9999px;
    min-width: 120px;
    background: url(https://soldart.fr/wp-content/uploads/2023/12/logo-SOLDOUT-250.png) no-repeat center center;
    background-size: 100%;
}

– UNSOLVE : On the main products page, actually the product are show 4 per columns, that’s fine.
User can change the view. They are too much choice. I just want to fix the choice by 2 or 6 columns, only visible on computer view like today.
>>> This is required the customization. We can’t provide support here.

– On the main products page, user can change the view to 20, 24, 36 and all.
I use infinite scroll, so it’s not necessary to see this parameter on computer and mobile. How i can delete this without delete all toolbar ?
>>> The CSS code doesn’t work, i try in several part and i don’t understand why it’s not working. It’s an other code i should apply in function.php ?
>>> Please try with this custom CSS:

.woocommerce .products-per-page {
    display: none !important;
}

– UNSOLVE : On the main products page, with infinite scroll, products are charged 8 by 8, loading is little bit long. Some parameters should be change or just need to add plugin cache ?
>>> It depends on the product image’s size. Yes, you can try with the cache plugins.

– UNSOLVE : On the main products page, when a product was sold out, I can’t click on the image to go on the single product page. Which parameter I should change ?
>>> Please add this custom CSS:

body .productCarousel .outofstock .out-of-stock+.product-content-image, body .products-loop .outofstock .out-of-stock+.product-content-image {
    pointer-events: inherit;
}

– UNSOLVE : On the main products page and single product page, brands are write : by alphabetical order separated with comma.
I want to change on each product, individually, the sense (not same rule apply on all product).
For example :
actually it’s “brand A, brand H, Brand Z”
tomorrow it should be : “Brand Z x brand A x brand h”
That’s means, comma are change by “x”
This parameter should be change in CSS or other ?
>>> This is required the customization, we can’t support you on this one.

– on the mobile phone, when you place your finger on a product, you don’t see small presentation (add to cart, whislist, compare, view) like you can see on the products of the home page.
How I can change this parameters ?
>>> Thank’s, i apply, like you can see, but the presentation of the logos are static on mobile and tablet view, that’s means, not hide when you just navigate, like on computer view.
What is the CSS code to change this parameters ?
>>> It’s NOT possible. Because the hover state is different than desktop view.

– UNSOLVE : At the bottom of the single page, there is “suggestion” (related products). When I click to see more (arrow), just one product was show.
Which parameter I should change to see 5 new products (on computer) and 2 new products (on mobile) instead of one by one ?
The same parameters should be apply on cross sale … etc and other part
That’s mean 5 products show, you click on the arrow, 5 new product show. That’s should be “native” form.
>>> It can be done by switching to Single Product Builder with Elementor plugin. The Related Products Element will have more options. For more information, please take a look at this: https://xstore.helpscoutdocs.com/article/190-xstore-single-product-builder-with-elementor

– >>> On the whislist and compare page, the breadcrumbs is very big and on computer view (smallest than 16px), how I can change ?
It’s fine if the breacrumbs are in the align center for both of this pages, but it’s seems the changements (size of police too) doesn’t apply by changing with following your process
what are the CSS code ?
>>> We’re not sure what you mean? Can you please explain more?

– On the whislist page, how I can center the title (produits, en stock, …) ?
>>> I’m not sure that is center vertically, with square, right ? (so i check and add this css code :
vertical-align: middle
!important;
The CSS code seems to be right ?
>>> Yes, your code is right. They’re vertical align center now: https://prnt.sc/LS2yjuersZOl

The line under (products informations) with all the squares, aren’t in the center horizontally and vertically . It’s not necessary to center the image, i think.
What is the CSS code, i tried several thing but i doesn’t work.
>>> Can you please send a screenshot? We’re not clear on this.

– UNSOLVE : On the account page, products suggested was sold out. I want to see only product available. How I can change it ?
– UNSOLVE : The popup page of compare haven’t the button “add to cart” (ajouter au panier) like the poppup of whislist. How I can add it ?
>>> This is required the customization, we can’t support you on this one.

– UNSOLVE : Only on mobile, when I click on the logo of compare (top right of the page), I don’t see small popup open.
How I can change this parameters ?
>>> If you’re currently on the compare page, the popup won’t open.

– UNSOLVE : On mobile, the view is really limited. Is it possible to reduce de size of first fix columns ?
And for other columns, to do the same and prefer increase height with 2 line of texts ?
>>> Please try adding this custom CSS:

@media (max-width: 600px){
    .xstore-compare-items td:first-child {
        max-width: 100px;
        min-width: inherit;
        font-size: 12px;
    }
    .xstore-compare-checkbox label {
        word-break: break-all;
        word-wrap: break-word;
        font-size: 10px;
    }
}

– UNSOLVE : On mobile, there is empty columns, why ?
>>> The empty column is designed for other products will be added to compare.

– UNSOLVE : When I want to add on cart a product from compare, an error message appear and I can’t add them my cart. What is the problem ?
>>> Please double check the stock of your products.

– For all the process : cart to end, on computer view, the logo isn’t in the middle of white page, how I can change it ?
>> Thank’s, it’s seems to be working only on mobile view but not on other view (on other page like « facturation », « expédition »..
There is an other code ?
>>> The logo is in the left column(it’s not span to full-width), so it can’t be center. In this case, please use the header builder for the cart/checkout page: https://prnt.sc/G__EaP7FL6Hf

– UNSOLVE : An error message appear when I edit campaign :
Notice: La fonction WP_Scripts::localize a été appelée de façon incorrecte. Le paramètre $l10n doit être un tableau. Pour transmettre des données arbitraires aux scripts, utilisez plutôt la fonction wp_add_inline_script(). Veuillez lire Débogage dans WordPress (en) pour plus d’informations. (Ce message a été ajouté à la version 5.7.0.) in /home/ »nameofrepertory »/www/wp-includes/functions.php on line 6031
I tried to send some test, it’s doesn’t work and for other, it’s working…
>>> We can’t see this notice anymore.

– UNSOLVE : For French customer I configure an email version in French (with country selected) and for other customer (I select all country), I change in English. I test and it doesn’t work.
Why ?
I will not select 200 country for English version…
>>> We’ve made a test order and the email is in English: https://prnt.sc/xcVELfTjsXVz

– UNSOLVE : How I can add link on my logo, at top of the email (https://mywbesite.fr) for customer ?
>>> Currently, the image element on Email Builder is not support the link for now.

– UNSOLVE : When a order is “waiting payment”, few hours after, it’s automatically cancel.
I don’t want that this option apply automatically but manually.
How I can change this parameters ?
>>> Please navigate to WooCommerce > Settings > Products > Inventory > Hold stock (minutes) > then delete the 60 number: https://prnt.sc/1PlZe2fWPQpQ

Regarding your inquiries, we regret to inform you that some features you are seeking is not available at this time. Should you require additional features or enhancements, we kindly ask that you submit a detailed request to our development team https://www.8theme.com/taskboard/ (and other customers will be able to vote there is particular features should be added to further theme updates).

Thank you for your cooperation!

Best Regards,
The 8Theme Team

Hello @denis,

– On safari (version 12), the home page and some element of the same page doesn’t appear correctly, see the screen shot :
https://prnt.sc/jVxDKj6Hqzol
There is a like with update of elementor ?
>>> Version 12 is too old. Please update at least version 17 of Safari.

– UNSOLVE : At the bottom of the single page, there is “suggestion” (related products). When I click to see more (arrow), just one product was show.
Which parameter I should change to see 5 new products (on computer) and 2 new products (on mobile) instead of one by one ?
The same parameters should be apply on cross sale … etc and other part
That’s mean 5 products show, you click on the arrow, 5 new product show. That’s should be “native” form.
>>> It can be done by switching to Single Product Builder with Elementor plugin. The Related Products Element will have more options. For more information, please take a look at this: https://xstore.helpscoutdocs.com/article/190-xstore-single-product-builder-with-elementor

YES, i look…my single product page what build via elementor.
I dont see the parameters to change. You advice me to contact elementor support ?
>>> Please take a look at the Single Product Template I shared in private content: https://prnt.sc/do_utGCTbQ76

– On the whislist and compare page, the breadcrumbs is very big and on computer view (smallest than 16px), how I can change ?
It’s fine if the breacrumbs are in the align center for both of this pages, but it’s seems the changements (size of police too) doesn’t apply by changing with following your process
what are the CSS code ?
>>> So please add this custom CSS code:

/* desktop */
body.woocommerce-wishlist .page-heading .title,
body.woocommerce-compare .page-heading .title{
    font-size: 2.5em;
}
/* mobile */
@media (max-width: 480px){
    body.woocommerce-wishlist .page-heading .title,
    body.woocommerce-compare .page-heading .title{
        font-size: 1.5em;
    }
}

– The line under (products informations) with all the squares, aren’t in the center horizontally and vertically . It’s not necessary to center the image, i think.
What is the CSS code, i tried several thing but i doesn’t work.
>>> So please update the previous CSS code we sent you to:

body:not(.single-product):not(.woocommerce-wishlist):not(.woocommerce-compare) p.stock.out-of-stock {
    text-indent: -9999px;
    min-width: 240px;
    background: url(https://soldart.fr/wp-content/uploads/2023/12/vendu-bn-200.png) no-repeat center center;
    background-size: 60%;
}

I test, but it’s break all presentation on computer view…
If i understand well, the solution is to just have one column, for all process and all kind of view, right ?
What is the CSS code, please ?
>>> There is no custom CSS codes for this. You have to edit the template of cart page: https://xstore.helpscoutdocs.com/article/193-xstore-cart-page-builder-with-elementor

I invite you to made a test and select for delivery and shipping : France
You will see that email is in english.
I made a test few hours ago.. How to solve that ?
>>> We will take a closer look on this issue.

– I don’t see the country informations in all emails for billing address and shipping address. What is the problem ?
On your test this morning, it’s appear, but on mine, not… and not in email of administrator part (“you receive a new order…”).

– I don’t see on all emails for shipping informations : phone and email
It’s very important if billing and shipping address are different
>>> Can you please send us a screenshot of your test emails?

– Where i can change the old logo of twitter at the bottom of each email ?

– On mobile phone, the problem is the same, text, image, buttons … all should be configure. How i can change them ?
>>> They’re not possible right now. Please add a feature request/improvement: https://www.8theme.com/taskboard/. Our development team will consider and release in upcoming updates.

Thank you for understading!

Best regards,
The 8Theme Team

Hello @denis,

– At the bottom of the single page, there is “suggestion” (related products). When I click to see more (arrow), just one product was show.
Which parameter I should change to see 5 new products (on computer) and 2 new products (on mobile) instead of one by one ?
The same parameters should be apply on cross sale … etc and other part
That’s mean 5 products show, you click on the arrow, 5 new product show. That’s should be “native” form.
…….
>> Please take a look at the Single Product Template I shared in private content: https://prnt.sc/do_utGCTbQ76

<<<<<>>>>> Thank’s. I checked, i should create a new template and apply, that’s only solution ?
>>> Yes, that’s the best solution for now.

– WHISLIST PAGE : The line under (products informations) with all the squares, aren’t in the center horizontally and vertically.
>> Can you please send a screenshot? We’re not clear on this.
See the screenshot
https://prnt.sc/-YFzyHaD_4Oa

<<<<<>>>>> You forget to answer to my request
I applied the CSS code you gave me, but it’s seems to center only the title, not all.. (include square)
See the new screenshots
https://prnt.sc/i4pNvu1c7kT8
https://prnt.sc/sCQ2pXU78uzB
>>> We missed that part, please add this custom CSS code:

.xstore-wishlist-price,
.xstore-wishlist-checkbox {
    text-align: center !important;
}

th.xstore-wishlist-checkbox input[type=checkbox] {
    margin: 0;
}

– I don’t see the country informations in all emails for billing address and shipping address. What is the problem ?
On your test this morning, it’s appear, but on mine, not… and not in email of administrator part (“you receive a new order…”).
<<<<<>>>>> The country appear now, except when it’s located in France.
See the screenshots ;
https://prnt.sc/0MKdRSP-55h2

– When a customer place something in cart, and he check to calculate shipping cost, he should enter country, post code, city.
Is it possible to change this option and just ask “country”, except for france, because there are locale pickup depending on post code ?
See the screenshot :
https://prnt.sc/EUaSrTdGpvoK
>>> Unfortunately, WooCommerce doesn’t support the email & phone in shipping address. Here are some guides you can follow(or maybe hire a expert developer to resolve this, because it needs to change many parts from WooCommerce):
– https://www.businessbloomer.com/woocommerce-add-shipping-phone-checkout/
– https://stackoverflow.com/questions/18859237/woocommerce-how-to-customize-the-addresses-output

– On compare page, there is still problem of align text, see this screenshot :https://prnt.sc/AbZUsE9UOFNC
>>> Please add this custom CSS:

@media (max-width: 600px){
    .xstore-compare-row-checkbox td.xstore-compare-checkbox span.flex.align-items-center {
        flex-wrap: wrap
    }
    .xstore-compare-checkbox label {
        margin-left: -6px;
        font-size: 8px
    }
}

– What is the CSS code to change the text : “rupture de stock” (sold out) by “vendu” ?
>>> It can be done by custom PHP code, you have to add this code to functions.php file in your child theme:

add_filter( 'woocommerce_get_availability', 'change_out_of_stock_text_woocommerce', 1, 2);
function change_out_of_stock_text_woocommerce( $availability, $product_to_check ) {
       // Change Out of Stock Text
    if ( ! $product_to_check->is_in_stock() ) {        
        $availability['availability'] = __('Coming Soon', 'woocommerce');        
    }
    return $availability;
}

I MAKE REQUEST TO YOUR TEAM FOR ALL THIS QUESTIONS :
– Where i can change the old logo of twitter at the bottom of each email ?

– On mobile phone, the problem is the same, text, image, buttons … all should be configure. How i can change them ?

>>> Thank you so much for all your suggestions, we will forward them to the development team and they will consider to include them in upcoming updates.

Best regards,
The 8Theme Team