Design product page in woocommerce

I want to design of product page

This page is design by advance layout editor and i want to this header and sidebar in my product page
enter image description here

I try to design but i didn’t done same as above image. this is product page
enter image description here

Actually i am using enfold theme so I added this css is quick css

.single-product-main-image {
    width: 25%;
}

.single-product-summary {
    overflow: hidden;
    width: 45%;
    float: left;
    margin-right: 5%;
}

.single-product .sidebar {
    width: 25%;
}
THis is my code of child theme function.php

//sidebar
add_action('init','ava_product_sidebar_init_mod', 50);
function ava_product_sidebar_init_mod() {
    remove_action( 'woocommerce_before_single_product_summary',  'avia_close_image_div', 20);
    add_action( 'woocommerce_before_single_product_summary',  'avia_close_image_div_mod', 20);
    add_action( 'woocommerce_after_single_product_summary', 'avia_add_sidebar_mod', 19);
}

function avia_close_image_div_mod() {
    echo "</div>";
}

function avia_add_sidebar_mod() {
    global $product, $avia_config;
    if( is_product() ) {
        $avia_config['currently_viewing'] = "shop_single";
        get_sidebar();
    }
}





//header
add_action('ava_after_main_container', 'add_banner_before_breadcrumb'); 
function add_banner_before_breadcrumb() {
    if ( is_product() )
    {
        echo '<div id="av_product_description" class="avia-section main_color avia-section-default avia-no-shadow avia-full-stretch av-parallax-section avia-bg-style-parallax av-minimum-height av-minimum-height-75 container_wrap fullsize" style="color:#ffffff;" data-section-bg-repeat="stretch" >
              <div class="av-parallax avia-full-stretch"></div>
        </div>';
    }
}

add_action('wp_footer', 'ava_custom_script_parallax');
function ava_custom_script_parallax(){ 
?>
<script>
(function($){
    
    $('#av_product_description .av-parallax').css('background-image', 'url(' + 'http://staging.jskindustrial.com/wp-content/uploads/2020/09/JSK_Industrial_Supply_our_header01.jpg?fbclid=IwAR3-relnNkAxRg6o36BXYLXpnbKX5QoTLQN_BjzyMkIBE6YprQ2Whc1Vvac' + ')');
    $('#av_product_description').css('height', '180px' );
})(jQuery);
</script>
<?php
}

Source: Ask Javascript Questions

LEAVE A COMMENT