HTML Block slider doesn’t work with Elementor

Hey!

I have tried for the past few days to follow the Doc. and wrap my head around the relationship of the Header builder, HTML Blocks and Sliders.

I have managed to get as far as I could but was not been able to make the Top Bar to display a Slider created with Elementor and insert it into the middle section by an HTML Block.

I would really need your help on the matter to figure out what am I doing wrong…

Waiting for your reply!

Best Regards,
Lari

Hello,

First of all Create a HTML Blocks and add the content in the HTML as you show in the top bar of the header builder.

Then Go to WoodMart > Header builder > edit the current header > Add element HTML Blocks > Choose which HTML block to display in the header.

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

Best Regards.

Hey!

I have created the HTML Block, and the Slider and connected the two of them.
In outer words, here is what I did:

I have created a single Slide and edited it with Elementor -> Inside the edit page of Elmenetor, there is a Text Editor element with text.
I have also set the slide to Content no space -> On and the Full-width content -> On.

Now, inside the HTML Blocks, I have created a new HTML Block and also edited it with Elementor but this time I have dragged and dropped the Slider Element inside the Elmentor Edit page and set it to the Slide I have created above.

After all the above had been done and I made sure that inside the Elementor -> Settings -> General the HTML Blocks are enabled, I went to the Woodmart Header Builder and inserted the HTML Block, and set it to the HTML Block I have created above.

After all that I have, it still doesn’t work…
If I am missing something or have done something wrong, I would really need your guidance to solve this issue.

Waiting for your reply!

Best Regards,
Lari

Hello,

Please check this video and create the HTML block as per your need and use in the top bar.
https://youtu.be/WAuOu-PNg7c

Best Regards.

Hey!

I saw the video!
Thank you but it does not resolve it for some reason.

I think the problem lies in the HTML Block itself – I think it can’t take some specific elements from the Elementor Page Builder and then display them to the Header Builder of the Theme.

I think this way because I was trying to put only text and it displayed it fine but as soon as I put the slider element by Elementor with more than one slide it stretches it to full width and does not show anything on the sides of the slider including the slides themselves.

In outer words, when there is more than one slide inside the Elementor Slider element it stretches the element and does not display anything inside the top section of the Header Builder.

Waiting for your reply!

Best Regards,
Lari

Hello,

Please tell me the path which html you are using on your site and also share the wp logins details of your site i will check and give you a possible solution.

Best Regards.

For sure!

In the attached.

Waiting for your reply!

Best Regards,
Lari

Hello,

I have added the HTML Block in the Header banner instead of Top Bar. Now it is working fine. Go to Theme Settings > General > Header banner.

Now check back your site after completely clearing the browser cache.

Best Regards.

Hey!

That’s great!
I saw that it is working but now I have another problem, I need the social media icons to be in the same line as the slider…

Is there a way to make that?

Waiting for your reply!

Best Regards,
Lari

Hello,

Try to add the Social Media Icon via page builder in the HTML Blocks that you have made for slider.

If you have any questions feel free to contact us.

Best Regards.

Great!

That solved the problem!
Thank you very much for the fast and effective support!

I also wanted to ask if there is an option to change the Cart icon on hover when a user is hovering the Add to Cart button on a single product inside the shop or archive page?

I was trying to do it with CSS and the content property but got stuck and unable to show it on hover for some reason…

Is there a way to change it in the theme settings by any chance?

Waiting for your reply!

Best Regards,
Lari

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

body .wd-add-btn-replace .add-to-cart-loop:before {
  font-family: "Font Awesome 5 Free";
  content: "\f004";
}

You will be able to set another icon by replacing the value after the slash ‘/’ of the “content” attribute using the Font Awesome service.

Do not forget to enable the “Font Awesome” library via Theme Settings -> Performance -> Fonts & Icons.

Best Regards.

Hey!

Thank you for the fast response!
That’s great, I wanted to know if there is an option to insert an SVG inside the content property because I was trying to do that and it did not work properly for some reason…

Waiting for your reply!

Best Regards,
Lari

Hello,

You can change the content code code as per your requirements. Can you please share the wp logins details of your site? I will further check and give you a possible solution.

Best Regards.

Hey!

For sure, I shared them.

Best Regards,
Lari

Hello,

Try to add this custom css code:

.wd-add-btn-replace .add-to-cart-loop:hover:before {
  content: "\f11a";
    font-family: "woodmart-font"
}

Change the content code as per your need.

Best Regards.

Hey!

The icon set inside the code is showing and it is replacing the current icon but what if I want to change it to a custom SVG icon and then resize it?

Like in the URL attached?

Best Regards,
Lari

Hello,

Sorry, but there is no option in Theme Settings available for that. You can only change the font awesome icon but not the SVG icon to the button.

It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

I see, is there a way to make the icon of the Add to Cart button as the Mini cart icon on the website? (See Attached)

Best Regards,
Lari

Hello,

Where the attachment. Please send some screenshot where you want to do it.

Best Regards.

Hey!

My bad, I didn’t attach the files last time.
Is there a way to display the button’s text in a different color on hover?

Best Regards,
Lari

Hello,

Go to Theme Settings > Styles and color > Advanced button styles > add the add to cart button element and customize it.

Check this Manual:
https://xtemos.com/docs-topic/advanced-button-styles/

Best Regards.

[Lari]

Hey!

I have changed the buttons as you wrote to me but what I meant is would there be a possibility to display the text of the button in a different color instead of the icon on hover inside the shop/ archive pages?

Also, I have noticed that for some reason I can’t see the Coupon Code Form field on the checkout page…
I went into the HTML and found it but it looks odd on the checkout page now (See attached)

I have also gone and tried to use the elementor Woocommerce Hooks and the Woocommerce Notices widget that comes with your Theme but it did not work for me for some reason.

I went even further and tried to make a new Checkout Page with the theme Layers and Elementor Page Builder but still did not see the Coupon Code field and then I went and dug into the HTML to find it.

I really need your help on this one 🙏

Best Regards,
Lari

• This reply was modified 1 year, 3 months ago by Lari.

Attachments:

You must be logged in to view attached files.

Hello,

01. Try to add following custom css code in theme settings > custom css:

.wd-hover-standard .wd-add-btn .add-to-cart-loop span {
	color: red !important;
}

02. Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?

Best Regards.

Hey!

For sure, I am trying it now and I’ll let you know in the following hour how that went.

Best Regards,
Lari

Hey!

01. I have tried the code you gave me but it does not change the text on hover but rather changes the color of the text itself of the button. (See attached)

02. I have tried with some outer themes and the coupon code text does show as you can see in the attached.

Best Regards,
Lari

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the confusion if you want to change the add to cart title you can use the loco translate plugin to achieve this.

Here is the guide:
https://xtemos.com/docs-topic/translate-woodmart-theme-with-loco-translate/

01. If you want to add some text on hover then add the following custom css code:

.wd-add-btn-replace .add-to-cart-loop:hover:before {
    content: 'Test' !important;
}

02. Please deactivate all the plugins not related to the theme and switch the parent theme, check the issue, If the problem has gone, activate the plugins one by one, checking the issue to detect which one causes the problem.

Best Regards.

Hey!

01. Actually, the title on the Add to Cart button is good I only need that when the user hovers the button the text will stay the same but the background color and the color of the text on the button would be black and white.

02. I have deactivated all the plugins and changed the theme to the parent theme but left only Elementor, Elementor Pro and Woocommerce activated so that the checkout page won’t break but still did not see the coupon code field for some reason.

Best Regards,
Lari

Hello,

01. You are already using css code for this:

/*Add to cart button on hover*/
.wd-add-btn-replace .add-to-cart-loop:hover:before {
    content: 'הוספה לסל' !important;
	color: red !important;
	background: blue !important;
}

In this code add the color property and background property it will apply on the hover button. Change the color as per your requirements.

02. The coupon code is showing on the checkout page.
https://ibb.co/7nvZHWc

Best Regards.

[Author]

Posts