Hi Nikko, just solved here by adding code:

Last question, how do i change the top bar color (not the font) on a transparent background in mobile device because my other pages have a blue background on mobile device.

The price hack is based on this solution here:
https://kriesi.at/support/topic/woocommerce-products-price-display-when-using-avia-layout-architect/

It does work but I propose this to be a standard feature. All shops are based on prices and not being able to show the price as well as the price of the variation is a problem.

Additionally we did some custom programming to also show the product variation pricing and to sync several add-to-cart boxes on the same product page (we have on on top and one on the bottom):

Javascript:

jQuery(function($) {

    function aerobis_display_price() {

        var variations_data = jQuery.parseJSON($(".variations_form").attr("data-product_variations"));

        return variations_data;

    }

    if ($(".variations_form select").val() != "") {

        var variations_data = aerobis_display_price();
        //console.log(variations_data);
    }

    $(document).on("change", ".variations_form select", function() {

        var selected_box = $(this);
        var selected = $(this).val();
        var selected_text = $('option:selected', this).text();
        var select_name = $(this).attr('name');
        if (selected != "") {
            var selected_number = Number($(this).prop("selectedIndex")) - 1;

            $('.variations_form select[name=' + select_name + ']').each(function(selecta) {

                if ($(this).find('option[value="' + selected + '"]').length == 0) { // not exist in #select-2
                    $('.variations_form select[name=' + select_name + ']').append('<option value="' + selected + '" selected="selected">' + selected_text + '</option>');
                }

            });

            if (selected != '') {

                $('.variations_form select[name=' + select_name + ']').val(selected);
            }
            var selected_attr = new Array();
            var select_boxes = $(this).parent().parent().parent().parent().find('select');
            console.log(select_boxes);
            $(select_boxes).each(function(i, item) {
                console.log(item);
                selected_attr[i] = $(this).find(":selected").val()

            });
            console.log(selected_attr);

            //$(".variations_form select").prop("selectedIndex", $(this).prop("selectedIndex"));
            //	console.log( selected_number);
            var variations_data = aerobis_display_price();
            //console.log(variations_data);

            //	$('.variations_form select[name=' +select_name + ']').trigger('change');

            var selected_product_id = 0;
            var selected_count = selected_attr.length;

            $.each(variations_data, function(i, item) {
                var var_count = 0;

                $.each(item.attributes, function(key, att) {

                    if (jQuery.inArray(att, selected_attr) != -1) {
                        var_count++;
                    }

                });

                if (var_count == selected_count) {

                    selected_product_id = variations_data[i].variation_id;
                }

            });
            //console.log(selected_product_id);
            jQuery.post(avia_framework_globals.ajaxurl, {
                "action": "aerobis_format_money",
                "product_id": selected_product_id
            }, function(response) {

                //console.log(response);
                $('._variation_price').empty();
                $('.woocommerce-variation').before('<p class="price _variation_price">' + response + '</p>');
            });

        }

    });

});

Functions.php

function aerobis_format_money()
	{
	global $wpdb;
	$product = new WC_Product($_POST['product_id']);
	if ($product->get_price_including_tax() > 0)
		{
		echo woocommerce_price($product->get_price_including_tax());
		}

	wp_die();
	}

add_action('wp_ajax_aerobis_format_money', 'aerobis_format_money');
add_action('wp_ajax_nopriv_aerobis_format_money', 'aerobis_format_money');

function aerobis_enqueue_scripts()
	{
	wp_enqueue_script('aerobis-js-scripts', get_stylesheet_directory_uri() . '/js/scripts.js');

add_action('wp_enqueue_scripts', 'aerobis_enqueue_scripts');

I hope this helps others and saves you guys time and money. Again, I think this should go into the standard theme but until it does – use my code for free.

Code in action: fitnessgeräte von aerobis

Best,
Elmar

Like I said already, they are all exactly the same images, with exactly the same settings. Of course that was the first thing I checked. They are all set to TOP LEFT and set to show the first slide text across all of them. That is why I am submitting a ticket, I cannot see what could cause this issue.

Sure!

I already own this plugin.

All the info is here: https://livicons.com/examples#cbp=ajax/step-boxes-02.html?rev=031

But I have added the code for the html, css, and js below.

HTML: <!– Step box 02 –>
<div class=”container”>
<div class=”row”>
<div class=”step-box-02 step1 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Research & Planning</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step1;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: lab.svg;
style: solid;
size: 100%;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step1;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
<div class=”step-box-02 step2 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Design & Develop</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step2;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: pencil.svg;
style: solid;
size: 100%;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step2;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
<div class=”step-box-02 step3 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Test & Deliver</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step3;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: rocket.svg;
style: solid;
size: 100%;
rotate: 45;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step3;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
</div>
</div>

CSS:

/************ Step box 02 ************/
.step-box-02 {
padding: 0!important;
}
.step-box-02 h4 {
color: #263238;
font-size: 16px;
}
.step-box-02 p {
padding: 0 15px 0!important;
color: #78909C;
}
.step-box-02.step1:first-child .line {
background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(40%, #B2DFDB));
background: -webkit-linear-gradient(left, transparent 0%, #B2DFDB 40%);
background: linear-gradient(to right, transparent 0%, #B2DFDB 40%);
}
.step-box-02.step3:last-child .line {
background: -webkit-gradient(linear, left top, right top, color-stop(60%,#B2DFDB), color-stop(100%,transparent));
background: -webkit-linear-gradient(left, #B2DFDB 60%, transparent 100%);
background: linear-gradient(to right, #B2DFDB 60%,transparent 100%);
}
.step-box-02 .line {
position: relative;
height: 1px;
width: 100%;
margin-left: -10px;
background: #B2DFDB;
margin: 55px 0;
}
.step-box-02 .morph-icon {
width: 30px;
height: 30px;
position: absolute;
top: -15px;
left: 50%;
margin-left: -15px;
}
.step-box-02 .straight-icon {
width: 0px;
height: 0px;
position: absolute;
top: 0px;
left: 50%;
margin-left: 0px;
}
@media (max-width: 767px) {
.step-box-02 {
margin-top: 60px;
}
}

JAVASCRIPT:

//Step Box 02 additional animations
$(document).ready(function () {
$(‘.step-box-02′).hover(
function() {
TweenLite.to($(this).find(“.morph-icon”), 0.15, {width:’90px’, height:’90px’, top: ‘-45px’, marginLeft: ‘-45px’, ease: Power0.easeNone});
TweenLite.to($(this).find(“.straight-icon”), 0.15, {width:’30px’, height:’30px’, top: ‘-15px’, marginLeft: ‘-15px’, ease: Power0.easeNone});
},
function() {
TweenLite.to($(this).find(“.morph-icon”), 0.15, {width:’30px’, height:’30px’, top: ‘-15px’, marginLeft: ‘-15px’, ease: Power0.easeNone});
TweenLite.to($(this).find(“.straight-icon”), 0.15, {width:’0px’, height:’0px’, top: ‘0px’, marginLeft: ‘0px’, ease: Power0.easeNone});
}
);
});