Hey Jason,
Sorry for the very late reply, in my experience the variable straight to cart product links that I have seen on sites seem to have been created with premium plugins, but there are other options, for example, this article offers code snippets for regular straight to cart product links. For variable products which I believe you are asking for this article offers a direct linking for Variable Product to Cart which could be applied to a button or image on your homepage, still not exactly what you are looking for, but it an option.
For plugins, this one seems to offer the option, but I have not tested, the key point to this plugin is: it adds the First variation of the variable product in the cart, so it could work for you.
Direct Checkout for WooCommerce seems to be the most popular in the WordPress library.
I tried to find the premium plugin that as I recalled, had a variable option on load and then linked directly to the cart, but I didn’t find it, it might be on CodeCanyon.net.

Best regards,
Mike

Hi,
@Gianluigi and @Mgyura thanks for your patience and links, so I first tested both of your sites on Windows 10 & Mac Big Sur with Chrome & Safari & Brave, etc.. and the YouTube icon showed just fine from the USA, but when I tested with a VPN in Italy @Gianluigi’s icon did not show with this error:
[Intervention] Slow network is detected. Fallback font will be used while loading:

So the error links to: Feature: Intervention: WebFonts use adaptive timeouts to take fallback fonts and at the bottom of the article the solution is:
Web site owners can opt-out from the intervention by setting CSS font-display to other than ‘auto’.
but I don’t believe we have set the display to “auto” specifically, I believe the browser is assuming this based on our css:

 #top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before{ font-family: 'entypo-fontello'; }

So I believe the slow network is the cause and the browser is looking for shortcuts, and is doing this, it’s not so much the YouTube icon than the waterfall of the DOM is just happening to pick the last loading one or such. So we could try setting the display to “block” so the browser will load the font:

 #top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before{ font-family: 'entypo-fontello'; display: block;}

which may work, but the site may also still have other issues due to the slow network.
I do note that @Mgyura is also in the USA, so I’m not sure how to recreate a test for you since we are both in the USA, but I do believe that the issue is also a slow network, so I believe the same css would work.
Please note that while this may help, I would recommend a webhost on a better network, sort of like that saying: Speed Matters 🙂 but then again we had to jump through a lot of hoops to see the error, so maybe very few people are getting the error, and even fewer are looking for that icon? Just a thought.

Best regards,
Mike

Hi,
Thank you for your feedback, so I tried to recreate your mega menu on my localhost so I could try so different solutions to achieve your layout and on my first attempt, pure luck, I believe I did achieve this:

this is the backend view:

So I believe the difference is that you are adding the “This is the Ministry About Text” text as the discription and not the menu title, but I’m not sure as I haven’t logged in to your menu.
Please give this tweak a try and let us know if this helps.

Best regards,
Mike

Hi,
@Mischa thanks for the screenshot but I can not reproduce the issue with v4.8, please do not use patch files from older threads, I have removed this source file. This issue and solution is from an older version. Please test again with a completely new theme upload of v4.8 – if you find you still have an issue and you have disabled all of your plugins, then please open a new thread so we can assist.

Best regards,
Mike

Hey Jarmo,
Sorry for the very late reply and thanks for your patience. To achieve what I believe you are looking for you can try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_script() { ?>
    <script>
(function($) {
    $('#top.archive.woocommerce-page .woocommerce-products-header .woocommerce-products-header__title').detach().insertBefore('.breadcrumb.breadcrumbs.avia-breadcrumbs');
    $('#top.archive.woocommerce-page .woocommerce-products-header').detach().insertAfter('.template-shop.content');
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

Please see the screenshot in the Private Content area and let me know if I understood the position correctly.

Best regards,
Mike

Hi,
First I disabled the previous css, and then on the homepage I added the custom class “red” to the second blog element:

Then I added this css to your Quick CSS:

.avia-content-slider.red .slide-content .slide-entry-title {
	background-color: #d09c94 !important;
}

so for the homepage this is the result:

now if we go to the /zeeland-heden-en-verleden/ page and add the same custom class “red” to the blog element the posts will also show the same:

So now that the css was added once every blog element with the custom class “red” will show this way anywhere on your site, you can now do this with other colors by using a different custom class and create a different css snippet.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Glad we were able to help, thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Thank you for your patience and the login, I see that your homepage is the basic WordPress Blog roll as set by the WordPress settings:

So with this setting you are not really using the page layout options of the Enfold theme, WordPress is just listing your blog posts.
You can create a page with the Enfold Advanced Layout Builder and add content and H1 title and then use the “Blog element” to show your posts, but there are so many options available to you I’m not sure how to advise because I don’t know what your Homepage vision is.
Please take a look at these Enold Demos for homepage ideas so you can give us an idea of what you would like to achieve.

If your current homepage layout is exactly what you want, and you just want to make the top post an H1, no matter which is the top one, so your homepage will have an H1 I believe that this could be done with a small script.

Best regards,
Mike

Hey Theodor,
Thank you for your patience and for the link to your site.
As I understand your site layout for this section the first row will always be green, the second red, and the third is blue, for this please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#av_section_1 .avia-content-slider .slide-content .slide-entry-title,
.avia-button-wrap.avia-builder-el-6 > .avia-button {
	background-color: #c8d094 !important;
}
#av_section_2 .avia-content-slider .slide-content .slide-entry-title,
.avia-button-wrap.avia-builder-el-10 > .avia-button {
	background-color: #d09c94 !important;
}
#av_section_3 .avia-content-slider .slide-content .slide-entry-title,
.avia-button-wrap.avia-builder-el-14 > .avia-button {
	background-color: #a9c3cc !important;
}

Please see the screenshot in the Private Content area that displays this. So this would work as is, but I would recommend adding a custom ID to each of the 3 sections so if you should edit the page in the future the solution will continue to work.
The custom IDs would need to be added to the css to replace the default IDs of #av_section_X.
If you would like a hand with this step please include an admin login in the Private Content area, or if you are able to add the custom IDs we can rewrite the above css without logging in.

Best regards,
Mike

Hey Matt,
Thank you for your patience and the login to your site.
The issue is that on the category page your footer page footer elements have a line-break after each element:

On your correct pages this doesn’t occur. I believe this occurs because you are using v4.4, which is quite old now as it was released in May 2018
Please update to v4.8

Best regards,
Mike

Hi,

@aboderc is this what you ment:

this is the css:

#preise > div > div.container > div > div > div > div:nth-child(5) > div > div.avia-table.main_color.avia-pricing-table-container.avia_pricing_minimal.avia-builder-el-92.el_after_av_hr.el_before_av_textblock.skTable.avia-table-1 > div:nth-child(2) > ul > li.avia-heading-row,
#preise > div > div.container > div > div > div > div:nth-child(5) > div > div.avia-table.main_color.avia-pricing-table-container.avia_pricing_minimal.avia-builder-el-92.el_after_av_hr.el_before_av_textblock.skTable.avia-table-1 > div:nth-child(2) > ul > li.avia-heading-row > span {
	background-color: green !important;
    border-color: green !important;
}

What I note from your css is there is no #av_section_1 on that page, I believe that you used the custom ID #preise which replaced the default #av_section_1. But that is OK because a custom ID is a better approach.

Best regards,
Mike

Hi,
Thank you for your patience, and thanks for the link to your staging site, please see the screenshot in the Private Content area.
This screenshot is showing your two logos at the same time on mobile, you will note that you can see both of them instead of them overlapping and only seeing one of them.
To create this screenshot I changed the opacity in my browser only, this led me to the css:

@media only screen and (max-width: 767px) {
.responsive .logo a {
    display: table-cell;
    vertical-align: middle;
}
}

changing the “table-cell” to “inline-block” corrects, but then we need to correct the padding for after scroll when the class “av_header_transparency” is removed and this css doesn’t work anymore:

@media only screen and (max-width: 767px) {
.responsive #top .av_header_transparency .logo {
    padding-top: 20px !important;
}
}

So the full solution is this:

@media only screen and (max-width: 767px) {
.responsive .logo a {
    display: inline-block !important;
    vertical-align: middle;
}
.responsive #top .logo {
    padding-top: 20px !important;
}
}

I added this to your Quick CSS and is working now, please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the link to your site, I believe this is related to the browser Accessibility Focus, #5B9DD9, you may also note the burger menu also does this, similar to the Focus Outline
In my tests this css seems to work:

.html_av-overlay-full #av-burger-menu-ul li a:active,
.html_av-overlay-full #av-burger-menu-ul li a:focus {
	background-color: yellow !important;
}

In my tests using :active & :focus together seems to help, but we are trying to overwrite the browser and not the page css, which is tricky because I believe the browser uses javascript to inject the css rules.
While the color is yellow, I believe my screen is showing a slight yellow-green, so I think the accessibility color #5B9DD9 is not completely overwritten.
What color are you trying to change this too? Are you going to try to change all of the browser accessibility colors, such as the burger menu, input fields, etc?

Best regards,
Mike