Viewing 30 posts - 1 through 30 (of 40 total)
  • Author
    Posts
  • #725235

    Hi Support Team

    On the responisve smartphone view, there ist just on column in the shop view of woocommerce.

    How can i change this to 2 columns?

    All the best,
    Pascal

    #726180

    Hey Pascal,

    You are using 3 columns layout. Changing column count to two on mobile would display 2 products side by side and 1 below, with an empty space. Please consider using 4 column layout or stick to 1 column on mobile :)

    Best regards,
    Yigit

    #726509

    Hi Yigit

    I change the column to 2 in the woocommerce setting, but on the mobile view (smartphone) it still just one column. What i would have is a 2 columns on smartphone view.

    All the best,
    Pascal

    #726571

    Hi,

    You added your products using shortcodes in column elements. You should change the page layout to use WooCommerce options and need to add Product Grid element to your page.

    Best regards,
    Yigit

    #726657

    Hi Yigit

    Yes i use at the looks shortcodes, because i could not use single products in avia-editor, but this is a different story, but my asking i about the normal woocommerce elements like https://www.atcarolines.ch/shop/ (without short codes)

    All the best,
    Pascal

    #727500

    Hi Yigit

    Ifound the follwoing css, but it does not work on mobile (only landscape)

    All the best,
    Pascal

    /*iPhone 6 and iPhone 6+ portrait and landscape*/
    @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
    .woocommerce .products-4 li {
    display: inline-block;
    width:49%;
    vertical-align: top;
    min-height: 0px !important;
    }

    .woocommerce .products-4 .add_to_cart_button {
    width: 100% !important;
    max-width: 100% !important;
    }

    .woocommerce .products-4 .show_details_button {
    width: 100% !important;
    max-width: 100% !important;
    }
    }

    /*iPad Mini LandScape n Portrait*/
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){
    .woocommerce .products-4 li {
    width:23%;
    min-height: 350px !important;
    display: inline-block;
    }

    .product-buttons{
    position: absolute;
    bottom: 0;
    }

    .woocommerce .products-4 .add_to_cart_button {
    width: 100% !important;
    max-width: 100% !important;
    }

    .woocommerce .products-4 .show_details_button {
    width: 100% !important;
    max-width: 100% !important;
    }

    }

    #728143

    Hi,

    use this code:

    @media only screen and (max-width: 736px) {
    .avia_textblock pre, .responsive #top #main .products .product {
    width: 45.6% !important;
    margin: 0 4% 1% 0;
    }}

    Best regards,
    Andy

    #731040

    Hi Andy

    Fine this work, but it has also influence to the shortcodes of Woocommerce (https://www.dropbox.com/s/n71j75d21f3lzq5/Screenshot%202017-01-09%2009.51.51.png?dl=0)

    So please feel free to test on the stating site.

    All the best,
    Pascal

    #731598

    Hi,

    you could use page-id, so the code works on specific pages only. Something like this:
    @media only screen and (max-width: 736px) {

    .page-id-51 .avia_textblock pre, .responsive #top #main .products .product {
    width: 45.6% !important;
    margin: 0 4% 1% 0;
    }}

    For more information about page id: http://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/

    Best regards,
    Andy

    #734258

    Hi Andy

    Thank you for your answer, you solution work for the shop but is in the confict with the short code on the look sites, it would be grate if the short codes of a single product be part of the avia layout archtitektur > plugin-additions and you can decide at theme settings > shop option the columns on the mobile view.

    This both functions shoud be in the next releaser ;-)

    All the best, Pascal

    #734932

    Hi,

    try this instead:

    .page-id-51 .avia_textblock pre, .page-id-51 .responsive #top #main .products .product {
    width: 45.6% !important;
    margin: 0 4% 1% 0;
    }}

    For any feature requests: https://kriesi.at/support/enfold-feature-requests/

    Best regards,
    Andy

    #735248

    Hi Andy

    It works super on the shop but also ad the short code. so for what i look, that it only work on the shop (45.6%) and for the rest (100%).

    All the best,
    Pascal

    #735249

    You can test it if you like, because its statign setup

    #737657

    Hi Andy

    Still waiting of a answer or solution.

    All the best,
    Pascal

    #738099

    Hi,

    We edited the css codes in the Quick CSS field but it’s not taking effect in the frontend. Please go to the wp-content > uploads > dynamic_avia folder, rename the enfold_child_theme.css file to something else. Go back to the theme options, toggle any settings then save to regenerate the dynamic stysheet again. Purge the cache afterwards.

    Best regards,
    Ismael

    #739493

    Hi Ismael

    Did you the change at the staging or at the live installation.

    All the best, Pascal

    #739502

    Hi Ismael

    So i did it how you descrip put no effect…..

    All hte best,
    Pascal

    #741144

    Hi Ismael

    I tried a different way, the opposing way, but with now effect.

    We would like to have at the end: at the smartphone view 2 columns at the shop sites: https://www.atcarolines.ch/shop/ but with all the changes it has also a effect to all the product view in the looks sites (https://www.atcarolines.ch/look-natuerlich-chic-basic-version/) with product short codes of woocommerce, because in the avia layout architeckture is at the plugin extension no possible for showing single products (only product categoriers as sliders/rasters/list).

    So maybe you have idea how we can solve this for dies 2 different view.

    All the best

    #742318

    any idea?…. My customer becomes undudlig

    #743108

    Hi,

    We are very sorry for the late response. We added the css modification in the Quick CSS field and it seems to be working now. Please look at the following page.

    // https://www.staging3.atcarolines.ch/shop/

    This is the css modification.

    @media only screen and (max-width: 736px) {
        .avia_textblock pre, .responsive #top #main .products .product {
            width: 45.6% !important;
            margin: 0 4% 1% 0;
        }
    }

    Best regards,
    Ismael

    #743256

    Dear Ismael

    Thanks for your answer and yes it works perfect on the shop sites, but it has also a big effect to the mobile view of ‘looks’ sites (with single short codes of woocommerce), the product are to littel. https://www.staging3.atcarolines.ch/look-evelyne/

    All the berst,
    Pascal

    #743763

    Hi!

    Why did you wrap the shortcode inside a “pre” tag? Please remove it.

    Regards,
    Ismael

    #743793

    Hi Ismael
    Sorry but i did not now what are you mean? But maybe its has something to do that we can show short codes at the avia layout at the funktions.php:

    add_filter( ‘avia_load_shortcodes’, ‘mmx_modify_shortcodes’, 15, 1 );

    function mmx_modify_shortcodes( $paths ){

    $template_url = get_stylesheet_directory();

    array_unshift( $paths, $template_url.’/shortcodes/’);

    return $paths;

    }

    add_filter( ‘avf_builder_boxes’, ‘mmx_avf_builder_for_products’ );

    function mmx_avf_builder_for_products( $metabox ) {

    foreach( $metabox as &$meta ) {

    if( $meta[‘id’] == ‘layout’ ) {

    $meta[‘page’][] = ‘product’;

    }

    }

    return $metabox;

    }

    All the best, Pascal

    #743861

    Hi!

    If you edit the page (https://www.staging3.atcarolines.ch/look-evelyne/), you’ll see this markup in a text block.

    <pre class="brush: php; gutter: false">[product sku="CGA57746"]</pre>
    

    What is the “pre” tag for?

    Regards,
    Ismael

    #743927

    Hi Ismael

    I have not deliberately added this. Is probably with the above changes in the function.

    How do I get this out? Without which the function of displaying individual products in avia layout is lost.

    All the best,
    Pascal

    #744582

    Hey!

    Those “pre” tags was added manually. You don’t need to remove the whole shortcode, just remove the “pre” tags. Example:

    <pre class="brush: php; gutter: false">[product sku="CGA57746"]</pre>
    

    .. should be change to:

    [product sku="CGA57746"]
    

    Why do you have to add the product shortcodes manually? You can just use the Plugin Additions > Product Grid element which is fully responsive by default.

    Best regards,
    Ismael

    #744761

    Hi Ismael

    If you can see on https://www.staging3.atcarolines.ch/look-evelyne/ i just write [product sku=”DGT5989″] in the avia layout. So the ‘pre class’ comes from the changes at functions.php which i implemented to show product short codes at avia layout

    __________________
    add_filter( ‘avia_load_shortcodes’, ‘mmx_modify_shortcodes’, 15, 1 );

    function mmx_modify_shortcodes( $paths ){

    $template_url = get_stylesheet_directory();

    array_unshift( $paths, $template_url.’/shortcodes/’);

    return $paths;

    }

    add_filter( ‘avf_builder_boxes’, ‘mmx_avf_builder_for_products’ );

    function mmx_avf_builder_for_products( $metabox ) {

    foreach( $metabox as &$meta ) {

    if( $meta[‘id’] == ‘layout’ ) {

    $meta[‘page’][] = ‘product’;

    }

    }

    return $metabox;

    }

    add_filter( ‘woocommerce_show_variation_price’, ‘mmx_always_display_variation_price’, 10, 3 );

    function mmx_always_display_variation_price( $bool, $product, $variation) {

    return 1;

    }

    add_filter( ‘avia_purchase_button_html_price’, ‘mmx_change_html_price’, 10, 3 );

    function mmx_change_html_price( $html, $price, $product ){

    $new_html = ‘<h1 class=”price”>’ . $product->get_price_html() . ‘</h1>’;

    return $new_html;

    }

    ________________

    The problem with the Product Grid; i can’t select a single product only product categories, otherwise i would use this.

    All the best,
    Pascal

    #745252

    Hey!

    If you can see on https://www.staging3.atcarolines.ch/look-evelyne/ i just write [product sku=”DGT5989″] in the avia layout. So the ‘pre class’ comes from the changes at functions.php which i implemented to show product short codes at avia layout

    The filters in the functions.php file have nothing to do with the “pre” tags. I modified one of the text block and removed the “pre” tag. Please remove the others.

    Best regards,
    Ismael

    #745288

    Hi Ismael

    Thank you for you answer, but could you tell me wehere you remove the ‘pre’ tag and how?

    All the best,
    Pascal

    #745367

    Hi,

    Please switch to Text tab on Text Block element to remove pre tags

    Best regards,
    Yigit

Viewing 30 posts - 1 through 30 (of 40 total)
  • You must be logged in to reply to this topic.