Tagged: , , , , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 12, 2015 at 4:59 am #486297
    ENBertussi

    Hi there awesome support people,

    I have tried to replicate the look and feel of a standard single product page with the avia layout builder but have yet to seem to be able to replicate the default woo/enfold single product page view with avia.

    The real reason I was drawn to using avia was so that I could have a side bar…. I have a toone of clients that use this theme, it’s basically my default go to theme and we all want the same thing A side-bar on the right that will work with mobile….

    So I either get a weird unconventional single product page or a get a confusing group of sidebar posts and missing documentation pages about how to hack css config files and function files to kind of make it work.

    What I can’t seem to narrow down is what in August of 2015 is the best solution for putting the side bar on the left or the right that will not break on mobile.

    So far I am unable to grok this from the several posts some of which I have previously participated in, the problem with the solutions I am now using is they are old and seem to be breaking on enfold upgrades and offer a very very poor mobile user experience….

    Let me know if there is a very actual best approach to have a single product either look like a normal default woo display of a single product page using avia, where I can then control the sidebar nicely or if there is a way to not use AVIA and have the sidebar show up not below the product.

    I do prefer to use the default due to one major and massively important reason.. social syndication, if you use avia on products or blog posts and jetpack with the publicize feature on the syndication is really jumbled up with tonnes of code and provides a poor content syndication output to social media platforms.. so I generally so far try to stay away from implementing avia on blog posts and product posts since ALL my clients are well syndicated to social with jetpack and publicize.

    You dig what I am saying you awesome masters of the codes?

    thanks for everything…

    ENB..//

    August 13, 2015 at 8:22 am #487004
    Josue

    Hey Erich Nolan!

    Sidebars do work fine on ALB enabled pages as long as you don’t use fullwidth elements, in any case you can always rely on Widget Areas element to mimic a Sidebar.

    Best regards,
    Josue

    August 15, 2015 at 10:04 am #488191
    ENBertussi

    Hi Josue,

    can you please read over my question again a little bit more carefully.

    problem I have with using avia is the amount of missing elements like the sku, tags, images of the product etc. how do you replicate the default single product view that comes with woo/enfold with avia?

    too as i mentioned which is far more important avia syndicating or sharing to social has tonnes of code and parce errors. unless this has been fixed since I gave up trying it..

    but please really read over my question. I’ll try to post some screen shots on Saturday afternoon Canada time.

    Thanks so much for your help as always :)

    ENB..//

    August 17, 2015 at 5:04 am #488540
    Ismael

    Hey!

    If you want to modify the default sidebar of the single product pages, you can follow the solution provided here: https://kriesi.at/support/topic/single-product-page-is-strange-sidebar-appears-under-product/#post-451940

    It will enable the default left or right sidebar.

    Cheers!
    Ismael

    August 19, 2015 at 5:36 pm #490266
    ENBertussi

    Hi Ismael,

    Does this modification provide a good mobile experience?

    In the past solutions that I have used create a problem for mobile users. The side bar persisted instead of going in-line on mobile like it of course must do, since the screens are so narrow when viewing in portrait mode on a mobile device.


    @Josue     Please see attached screen shots for avia layout builder https://www.dropbox.com/s/b36cfh0nhqd9mrv/avia%20layout.PNG?dl=0 vrs default woocommerce single product page view https://www.dropbox.com/s/dh8xy0gruwixizb/default%20woo.PNG?dl=0 .. Let me know if there is a quick path to replicating the basic default view with avia layout builder.

    cheers and thanks as always awesome support people :)

    ENB..//

    August 19, 2015 at 7:26 pm #490333
    ENBertussi

    Hey Ismael,

    I am having a hard time following along with the instructions on this post. https://kriesi.at/support/topic/single-product-page-is-strange-sidebar-appears-under-product/#post-451940 that’s one of the reasons why I started this one.

    Are all these files we are supposed to change go into the root of the child theme folder?

    ENB..//

    August 24, 2015 at 1:41 am #491962
    Ismael

    Hey!

    I’m very sorry for the delay. A few of the modifications should be done directly in the parent theme files. If you can give us the ftp details, we will add the modifications for you.

    Best regards,
    Ismael

    September 17, 2015 at 1:32 am #504458
    ENBertussi

    Hey Ismael,

    Do you mind if you guys could format the instructions such as:

    “file name” or “custom CSS short code in theme interface”
    “file location”
    “CODE SNIPPET”
    “extra instruction”

    for each piece of code that needs to get implemented into various files

    I need to do it for a few sites… so having an offline copy that would allow me to update my core them files when I do upgrades and also gaining insight to what is going on would be very uber awesome for me.

    cheers..

    September 17, 2015 at 4:05 am #504471
    Ismael

    Hey!

    Alright. Please follow the following steps:

    1.) Add this code in the theme’s functions.php file:

    #
# wrap single product image in an extra div
#

function avia_add_image_div() {
 echo "<div class='single-product-main-image alpha'>";
}

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

#
# wrap single product summary in an extra div
#

function avia_add_summary_div() {
 echo "<div class='single-product-summary'>";
}

function avia_close_summary_div() {
 echo "</div>"; //close out the summary
 get_sidebar();
}

function avf_product_sidebar_layout_mod($layout){
 if( is_single() )$layout = "sidebar_right";
 return $layout;
}

add_action('init', 'ava_product_sidebar_mod');
function ava_product_sidebar_mod() {
 add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2 );
 add_action( 'woocommerce_before_single_product_summary', 'avia_close_image_div', 20 );
 add_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 25 );
 add_action( 'woocommerce_after_single_product_summary', 'avia_close_summary_div', 3 );
 add_filter( 'avf_product_sidebar_layout', 'avf_product_sidebar_layout_mod', 5);
}

    2.) Edit config-woocommerce > config.php then look for this code around line 573:

    $sidebar_setting = avia_layout_class( 'main' , false );

    .. replace it with:

    $sidebar_setting = apply_filters( 'avf_product_sidebar_layout', avia_layout_class( 'main' , false ) );

    3.) Add this in the Quick CSS field or css > custom.css file:

    .single-product .template-shop .product {
width: 68%;
margin-right: 4%;
clear: none;
float: left;
}

    4.) Smile. :)

    Done.
    Cheers!
    Ismael

    October 16, 2015 at 4:47 pm #520133
    goodpixel

    Don’t. work http://www.ceramicaoutlet.it/prodotto/gres-porcellanato-15×15-cod-0073/

    October 16, 2015 at 4:49 pm #520134
    Yigit

    Hey!


    @unicaweb     please stick to your own thread – https://kriesi.at/support/topic/layout-product-page/

    Cheers!
    Yigit

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘single product page sidebar to right instead of below that won't break on mobile’ is closed to new replies.