HTML block in Empty Cart not working. Margin below Short Desc, on Product page

[Luke Nielsen]

Hello,

The answer to the Very Urgent message.

After your urgent message, I immediately started checking the site and I didn’t find any problems (see below video).

https://monosnap.com/file/VNiOX5ndyVLVQXjkG3Yzi4eILXFKBi

Also, I checked the site from the Incognito mode and the results were the same, everything work well.

https://monosnap.com/file/gD1xKNoSkiexlSWqQriGm35jl2d7Ec

Let me know if you have resolved the issue.

Kind Regards

• This reply was modified 2 years, 3 months ago by Luke Nielsen.

[harshwe]

Hello Luke,

Thank you for your Quick response.

I did not actually resolved it. As I mentioned earlier, I only restored from one of the previous available back-up (12th Jan 22, or so). Just to get things back as it is, and we can find out the possible reason for this crash. It is only restored at a working state or time. Hence, seems working or seems as if the issue has been resolved. In actual, the site is only restored back.

Also, it was done, in order for you and team to identify the root cause, by taking your time.

Can you please check the Child theme CSS page (by logging in as Admin), Custom CSS area of theme, and other relevant areas.
Also, a look at LS Cache plugin setting, if anything can be found there.

PS: Although that makes us too tensed, with raised heart-beats. Hence, as a workaround, we currently get our site restored from one of the previous back (with Hosting team support). As we cannot wait more or longer, for it to be identified. Atleast, as of now.

However, now you can take a look at all possible areas, settings of LS Cache plugin, as of now.
Because, there is a possibility, the same issue shall arise again also. Most probably, this may happen again.

Important to note: Now, as the site has been restored through the available back (around 2 days bak), hence, the Cache Plugin settings remains intact and LS Cache plugin in Active state too, like earlier it was. While site was working. And as it can be seen, that now the plugin is not creating any issues. So this should not be related to the Cache plugin at all. And we had Not made any changes in the Cache plugin and its settings since long. More than a month or so.
Rest, we are not using any 3rd party plugin

Regards

• This reply was modified 2 years, 3 months ago by harshwe.
• This reply was modified 2 years, 3 months ago by harshwe.
• This reply was modified 2 years, 3 months ago by harshwe.
• This reply was modified 2 years, 3 months ago by harshwe.

Hello,

9. In this case you will need to copy the file again (which already includes the update) to the child theme and make the same changes to the file that you made before.

11a. Here is a code for hiding the product title from the breadcrumbs.

.single-breadcrumbs-wrapper .woocommerce-breadcrumb .breadcrumb-last,
.single-breadcrumbs-wrapper .woocommerce-breadcrumb .breadcrumb-link-last:after {
  display: none;
}

https://gyazo.com/798a46832f7b66c35993254d68fc979a

11b. You can change these words by means of the “Loco Translate” plugin. Here is the video providing more detailed instructions:

https://www.youtube.com/watch?v=D3NsDdMzsls

Result:

https://gyazo.com/045aa3b47fd48183aa055b4f041bb702

11c. Please, try to use the below code to make the line a bit little.

.wd-stock-progress-bar .progress-area, 
.wd-stock-progress-bar .progress-bar {
    height: 4px;
}

As for the issue that broke the site:

In order to identify the problem, we need to see it on the site. It is very difficult to identify the problem by looking at the video so next time, don’t rush to restore your site so we can identify the issue on your side.

Kind Regards

[harshwe]

Hello Luke,

9.

In this case you will need to copy the file again…

OK. Got your point. Means, one has to do manually, every time.
Just wanted to know. Say we have already copied the file once in Child theme and made desired changes. Then, there is another Theme update.
In that case, how can one find whether there is any update in that specific file also, or not (with overall Theme update). What possible ways one can identify that.
Asking that, if there will be no changes in that specific file (with follow up Theme updates), then we can leave the file, as it is, in the Child theme (with our previous changes), and keep it untouched.

11.a.

Here is a code for hiding the product title from the breadcrumbs…

In the meantime, I came across below code also. Can you please suggest, which one will be more refined. (On Single product page)-

.woocommerce-breadcrumb .breadcrumb-last:last-child {
display: none;
}

Which one, of these 2, you shall prefer.

11.b.

You can change these words by means of the “Loco Translate”…

I do not prefer to use any plugin, specially just for these 2 words. Can you please suggest the Code snippet for this.
As these words are from Woodmart itself, so I assume, code should be easy for you. I expect you will surely suggest and share the same.

Regarding issue that broke site–

In order to identify….. don’t rush to restore your site

I understand. And I would not have rush to restore it (from available backup). But for below reasons, I had to-

a). It was already submitted to Search Engines and somewhat Live. (Although we have not marketed and promoted or shared somewhere else).

b). If we have been receiving quicker responses, or multiple times in a day, we could surely have waited, even though site had been submitted.

c). Other than that, it was already Friday, and we didn’t received the response (for existing queries), which we normally supposed to receive. And then it was about to be followed by Weekends (Sat, Sun). So could not take risk for atleast 3 more days.

Although I understand, I am getting much better responses from you. And you alone seems way better to us, for issues and to get proper responses.
But still, as this was for the first time, we faced such issue, that too sudden. Hence, got so much nervous and tensed. As you yourself might be watching, that we never make such changes and without getting confirm or verified. And had not even installed any 3rd party plugin, so far. Atleast as of now. And always prefer to try to first consult with you.

Hope you can understand.
PS: However, if at all, we face any such issue in future, will try not to restore. And will share the details with you. And wish, you will surely take a look on that, as soon as possible. I Will try to mark that Urgent.
But ofcourse, we do not want this to repeat, anytime in future.

Regards

• This reply was modified 2 years, 3 months ago by harshwe.

Hello,

9. After every update our team adds a changelog with all changes in the update.

11a. The above code for hiding the product title doesn’t leave an unnecessary slash at the end.

https://gyazo.com/1d393fe109ae350ceca172dd6114f371

Here is a result of your custom code:

https://gyazo.com/3b03a160f36c7f37f0a4a837b82bf0c8

11b. Paste this code to the functions.php file in your child theme.

if ( ! function_exists( 'woodmart_stock_progress_bar' ) ) {
    function woodmart_stock_progress_bar() {
        $product_id  = get_the_ID();
        $total_stock = (int) get_post_meta( $product_id, 'woodmart_total_stock_quantity', true );

        if ( ! $total_stock ) {
            return;
        }

        $current_stock = round( (int) get_post_meta( $product_id, '_stock', true ) );

        $total_sold = $total_stock > $current_stock ? $total_stock - $current_stock : 0;
        $percentage = $total_sold > 0 ? round( $total_sold / $total_stock * 100 ) : 0;

        if ( $current_stock > 0 ) {
            echo '<div class="wd-stock-progress-bar">';
            echo '<div class="stock-info">';
            echo '<div class="total-sold">' . esc_html__( 'Sold:', 'woodmart' ) . '<span>' . esc_html( $total_sold ) . '</span></div>';
            echo '<div class="current-stock">' . esc_html__( 'Left:', 'woodmart' ) . '<span>' . esc_html( $current_stock ) . '</span></div>';
            echo '</div>';
            echo '<div class="progress-area" title="' . esc_html__( 'Sold', 'woodmart' ) . ' ' . esc_attr( $percentage ) . '%">';
            echo '<div class="progress-bar"style="width:' . esc_attr( $percentage ) . '%;"></div>';
            echo '</div>';
            echo '</div>';
        }
    }

    add_action('init', 'woodmart_stock_progress_bar');
}

I have already changed the text for these words (Ordered, Items available) so you can just copy it.

https://monosnap.com/file/tJJck5fo9PkD1DsAXe73OZRyHY64s5

Yes, we understand.

If you have further questions, our customer support team is here for you.

Kind Regards

Hello Luke,

9. OK. Thanks for clarifying. Will team also mention about the File name, when there is any change in any file name itself.

11.a.

The above code for hiding….

OK. Will use the code shared by you. Thanks for clarifying further.

11b.

Paste this code…

Yes, this worked. Thank you 🙂

11.c. You suggested to lower the width or height of Stock progress line in this post response –
https://xtemos.com/forums/topic/html-block-in-empty-cart-not-working-margin-below-short-desc-on-product-page/page/2/#post-345923
Wanted to know, why the height gets increased automatically in our site. And not like, as it is showing in your site. With which element it is related to. Does that mean it gets changes on the basis of font size we used for any “Paragraph” element or any other.
Or due to some sort of code for line-height or any other reason.

Regards

Hello,

11c. The stock progress bar has default height (the default height is 7px) so it can’t be increased automatically.

In our demo, it has the default height.

https://woodmart.xtemos.com/shop/other/black-friday/pro-headphones/?opt=stockbar

Also, the decor demo (https://woocommerce-625997-2033187.cloudwaysapps.com/) doesn’t have a progress bar with a lesser height.

Please, clarify if I misunderstood you.

Kind Regards

[harshwe]

Hello Luke,

11.c. Yes, You got the point correctly. This is what I wanted to ask.
Thanks for sharing the links of Demo pages.
Yes, those are already wider, as we had on our site.

I thought that the width of progress bar was smaller initially and somehow increased. Probably I mixed up with something else. Thanks again for clarifying

This got skipped somehow-
9. OK. Thanks for clarifying. Will team also mention the File name in the Changelog itself, whenever, during an update, there is any change in any of the file.

Regards

• This reply was modified 2 years, 3 months ago by harshwe.

Hello,

9. You can check the link below and see our old changelog.

https://xtemos.com/forums/topic/woodmart-6-1-update-beta-test/

If you would like to discuss further questions, our customer support team is here for you.

Kind Regards

Hello Luke,

3. You once suggested to use the HTML generators to use in the Raw HTML Element to create Tables, as per our needs, here –
https://xtemos.com/forums/topic/html-block-in-empty-cart-not-working-margin-below-short-desc-on-product-page/#post-339435

e). I would like to use this sort of Table style in one of the page inside Raw HTML element. Below is the page for reference including Live working code –
https://codepen.io/lukepeters/pen/JjoVWd

Can you please suggest how to use this code in the Raw HTML Element.
I tried to add to whole HTML, but that did not worked (as CSS needs to be linked too). Hence, I then even copied whole CSS (from above link) at top of HTML code, but that too did not worked. I know, I am missing something.
Can you please help with this, to make it work.

You can create a New Raw HTML Element in the Last Row of the backend of page-
https://www.vasangini.com/wp-admin/post.php?post=8324&action=edit

Regards

[Luke Nielsen]

Hello,

Sorry for the delay.

First of all, I reproduced tables from the “Codepen” service on my side. As you can see from the below video, this code breaks the CSS styles of our theme.

https://monosnap.com/file/nL6fW1xOv0sQI8dVIOzfgiKqdZgcam

I recommend you use table generators that I mentioned in this (https://xtemos.com/forums/topic/html-block-in-empty-cart-not-working-margin-below-short-desc-on-product-page/#post-339435) topic. These generators use their CSS classes that will not affect our styles.

In the meantime, feel free to ask me any questions you may have.

Kind Regards

• This reply was modified 2 years, 2 months ago by Luke Nielsen.

[harshwe]

Hello Luke,

3 e). The one you suggested has a very basic Table structure. Although if nothing works, we will stick with the one you suggested. But, in case, if any of the below New ones could work.
Also, the “Codepen” is very famous and always works for almost any scenario, as it follows the best practice and principles of HTML. And it also shows Live results too, that works. And should work normally, as per basic CSS rules.

f). However, I am bit surprised, as why the first link (that I shared from Codepen) breaks the Layout of existing site. Because, we need to use the HTML and CSS code (from Codepen), in and under the Raw HTML Element.
How come, that can affect the styling of other areas, when the code will be constrained within the Raw HTML itself. Curious to know. Can you please suggest.
Also, did you tried earlier by entering the CSS or HTML some other way (that is, directly in the Global Custom CSS area of Theme settings) or some other way. And not alone in the Raw HTML Element.
Is it breaking due to this reason

g). Can you please check the below New ones at your end. If any (or both of these works or not). As these have beautiful Mouse-Hover styling. And these will resolve our purpose too.

i) https://codepen.io/alexerlandsson/pen/mPWgpO
ii) https://codepen.io/ajlohman/pen/GRWYWw

In either case, can you please check with the above 2 NEW links for creating Table, that will suit our needs.
Would appreciate, if you could please help me on this and make them work.

PS: We are eager to use either of above (2nd one seems more interesting)

Regards

• This reply was modified 2 years, 2 months ago by harshwe.

Hello,

f,g ) These tables from the “Codepen” (also that you added early) have global CSS classes that affect on the our site.

https://monosnap.com/file/l3evvrBRxyD3RurQv5GhVhUfJs4PKq

In addition, these tables use a backward-compatible language extension for CSS (Less, SCSS – you can see it in the below screenshots).

https://monosnap.com/file/fkZiLGNPcEYjnau4igPnogLwL5xKPn

https://monosnap.com/file/ZkyGMkbkbR496sMjf7IOBiNEiVw6XH

“Custom CSS” areas and the “Raw HTML Element” element support only CSS. Hence these codes from the “Codepen” will not work.

1. I recommend you find the table that will not have the “Less” and “SCSS ” language extensions.

2. CSS classes should not have global names like .container .body .row.

Kind Regards

Hello Luke,

3 f) g) Thank you for elaborating further on the Tables and CSS. Much appreciable.
Really helpful info.
Much thanks for further clarifying with your points in 1) and 2)

I used the Table code from Tablegenerator. But, It is shifting at very right side and right edge of the table is not clear and hidden too. Screenshot attached.
Can I ask, why so. And,
how to fix this issue.
Also, when I used Center Aligned, then also, it do not gets aligned centrally properly in respect to the Title that I added just above table, and in respect to overall page width too. Can you please try to replicate at your end.
And suggest how to properly align it centrally also.
PS: Please try to view in actual mobile device and Not the mobile view from browser of desktop. This appeared on mobile device only.

12. How to remove the white (transparent sort of) Background showing behind Wishlist icon, only when Wishlisted.
Means, how to hide the white BG, once the item is Wishlisted. And let it visible, when the item is not wishlisted, on Shop Archive pages.
As it seems too clumsy looking and kind of interfering when the wishlist icon shows up on White BG, when item is Wishlisted.
Please suggest, either by CSS or by Code snippet.

Regards

Attachments:

You must be logged in to view attached files.

Hello,

Please, send me the link to the product that has this table and describe where you define it.

12. As you can see from the below screenshot, I don’t have any white BG when it wishlisted.

https://monosnap.com/file/CqYW6YaSLVrIGxWdq51BMyOtRNsAJK

Let me know if you still have this issue.

Looking forward to hearing from you.

Kind Regards

Hello Luke,

3. h)
I enabled it as a Global Tab – named as Shipping. And is visible on every product page. You can check any product. One such for your reference is – https://www.vasangini.com/product/hand-painted-bohemian-tapestries-skull-queen-bedspread-beach-throw-free-ship-us/
I created an HTML Block with ID – [html_block id="8324"] and set it in Theme Settings > Single product > Tabs, as below-
https://i2.paste.pics/G9HSK.png
Can you please read above query again (from previous response), regarding main issue related to this and suggest further.
Can I ask, why it is so. And, how to fix this issue.
And, please suggest how to properly align it centrally also.
PS: Please try to view in actual mobile device and Not the mobile view from browser of desktop. This appeared on mobile device only.

12. Regarding this. I meant by small white colored circular Background (overlay sort) which shows up behind the Wishlist icon in normal state also. In and for the Mobiles Only.
How can we make this white colored circle hidden, once and only when the item is Wishlisted. And let it visible, when the item is Not wishlisted, on Shop Archive pages.
As it seems too clumsy looking and kind of interfering when the Red-colored Wishlist icon shows up on White BG (that is, when item is Wishlisted)

Please suggest, by custom CSS. If not, how can we achieve using Code snippet.
So that in mobile, ONLY Red colored Filled-heart will show up, once an item is wishlisted (without white colored circular BG)
Please see below for reference –
https://i2.paste.pics/G9HUC.png

Regards

Hi,

3. Your custom table is not responsive because its structure has width parameters that prevent it from being responsive. Try to remove ALL “width” values (check the screenshot https://prnt.sc/-gF913OeIHZU) from table HTML and check again.

12. Information about product wishlist state contained inside the icon element. Based on this it cannot influence its own wrapper styles, so it cannot be done via custom CSS code.

Kind Regards

[harshwe]

Hello Bogdan,

3. Yes, after removing Width Values, this resolved.
Thank you for pointing out in right direction and with screenshot.
Great, Thank you !!

There is one thing –
For few of the areas (within same table), the Content is showing in CAPS case, even though we entered them in the Title case. And for rest of the content, it is showing correctly (showing same way, as it is entered in RAW Element), in the same Case. As shown below-
https://i2.paste.pics/GD3CY.png
https://i2.paste.pics/GD3DV.png
Can I ask, why so. And how to fix this.

12. OK, I got your point.
So, in that case, how can we remove the White Overlay (Wrapper behind wishlist icon), completely for both the States (Normal and Wishlisted states). [ If it cannot be done for just one of the state, that is Wishlisted. ]
We need to remove or hide this wrapper, Just for MOBILE
Can you please share the CSS that will Hide the Wishlist Wrapper completely, for Mobiles only

Regards

• This reply was modified 2 years, 1 month ago by harshwe.
• This reply was modified 2 years, 1 month ago by harshwe.
• This reply was modified 2 years, 1 month ago by harshwe.

Hi,

3. Try to use the following custom code to remove uppercase from custom tables

table.tg th {
	text-transform: none;
}

12. Quick view and Wishlist buttons have a common wrapper that has a white background, so the background will be removed from both buttons (https://gyazo.com/aa091613404bcfcf4170b1ed79406e56). If you want to remove it, you can add the following custom code to the mobile custom CSS area in theme settings:

`body .wd-hover-quick .wd-buttons {
background: transparent;
box-shadow: none;
}`

Kind Regards

Hello Bogdan,

Thank you for your response.
3. `table.tg th {
text-transform: none;
}`
Yes, this worked. Can you please suggest how to use this CSS by creating first a Class in the field for Extra Class name under that same Raw HTML Element and then use it in the Custom CSS area of that same HTML block. (Details of HTML block already shared earlier in point 3 h) above )

As shown here – https://i2.paste.pics/GG2T5.png

I created an Extra class table-text-transform and added this in Custom CSS area of the HTML block itself.

.table-text-transform > .table.tg th {
	text-transform: none;
}

But unfortunately seems not working for me.
Can you please suggest what I am missing and how to resolve this.
As this way, it will affect only this specific Table

12.

Quick view and Wishlist buttons have a common wrapper…

Thank you. Will try this and let you know

Can you please take a look and answer to queries posted in few of other Topics, that are left unanswered. It’s been almost 7 days, since I am waiting for a reply from your side. It is way longer than usual.

Would highly appreciate, If you could please-
360715

361101

Regards

Hi,

Remove greater-than sign “>” and your code will start to work.

Kind Regards

[Author]

Posts