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

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";

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>

add_action('wp_footer', 'ava_custom_script_parallax');
function ava_custom_script_parallax(){ 
    $('#av_product_description .av-parallax').css('background-image', 'url(' + '' + ')');
    $('#av_product_description').css('height', '180px' );

Source: Ask Javascript Questions