Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1206898

    Hi there!

    Out of the box, the minimum number of columns that the woocommerce product slider can display is 2.

    Could anyone help me out with some custom code to display only 1 product (column) in the slider at a time?

    Thanks!

    #1207384

    Hey perfectword,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( to be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    #1207387

    Hi Nikko,

    I appreciate the offer, but there is nothing unique to my installation, nor is there an error to diagnose, that would require you to login.

    I am just looking for a customization to the product slider that would work on any wp installation running enfold and woo commerce.

    Thanks!

    #1207858

    Hi perfectword,

    https://share.getcloudapp.com/WnuGlDDE You can display just one product in the slider. Which version of Enfold are you running?

    Best regards,
    Victoria

    #1207879

    Hi Victoria,

    Thanks for the reply!

    That’s not exactly what I mean. I mean I just want to display one product at a time, then it would slide to another product.

    I’m talking about on the styling tab of the product slider where you select the number of columns to display, which is presently 2 to 5.
    https://prnt.sc/s7gzyn

    I just want to display one column.

    (I am running 4.7.3.)

    #1209569

    Hi perfectword,

    Oh, you can try using the featured image slider and assign the products that you want to show.
    Image 2020-05-04 at 16.42.53.png
    Image 2020-05-04 at 16.43.04.png

    The product slider does not have the one column option if there are more products to show.

    Best regards,
    Victoria

    #1209750

    Thanks, Victoria.

    That’s not a bad solution, but I lose the price, add to cart button, etc.

    I’m really looking for a function or some other custom code that will allow the product slider to have only 1 column.

    Thanks!

    #1210459

    Hi perfectword,

    We don’t have that option available at the moment. You might want to look for a plugin that has it or hire a freelancer to build it for you.

    Best regards,
    Victoria

    #1210465

    I’m not sure where I would find a plugin that would modify the Enfold product slider.

    I understand if no one here is inclined to take a stab at it, but could someone maybe give me a hint where I could find the code that makes the product slider? I’m willing to give it a whirl.

    Thanks!

    #1211120

    Hi perfectword,

    You can examine this file
    /enfold/config-templatebuilder/avia-shortcodes/productslider/productslider.php

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1211699

    So in /enfold/config-templatebuilder/avia-shortcodes/productslider/productslider.php I inserted

    __( '1 Column', 'avia_framework' ) => '1',

    at line 240, and I was able to select 1 column in the product slider style tab, but on the webpage itself, it displays at the same width as a single product would as if 4 columns were selected. It’s a quarter of the width of the 1/2 column layout element that the productslider is in.

    Can anyone offer an idea how to get the productsider to expand to full width of the area it is in with a single product being displayed at a time?

    Thanks!

    #1212155

    Hi perfectword,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1212799

    Thank you. How about screen shots instead?

    The product slider is in a 1/2 column.

    This first screen shot is displaying 4 products (columns) at a time on the slider. The four products take up the full width of the column.

    The second screen shot is displaying 1 product (column) at a time on the slider. The single product only takes up 1/4th of the width of the column. In order for this customization to be useful, it needs to take up the full width of whatever area it is in.

    Thank you!

    #1214510

    Hi,

    Thank you for the update.

    Please try to add this css code in the Quick CSS field or the child theme’s style.css file to change the width of the column inside the product slider.

    div .shop_columns_1 .products .product {
    	width: 100%;
    }

    Best regards,
    Ismael

    #1214710

    Thank you very much, Ismael! That worked.

    I am having trouble, however, implementing in the child theme.

    I reverted /enfold/config-templatebuilder/avia-shortcodes/productslider/productslider.php to the original file, then copied the modified version through CPanel File Manager to /enfold-child/config-templatebuilder/avia-shortcodes/productslider/productslider.php but now my modification to allow a 1 product column is no longer available in Avia Layout Builder.

    What am I doing wrong?

    Thanks!

    #1216032

    Hi,

    You have to create a new shortcode path or folder in the child theme first by using the avia_load_shortcodes filter in the functions.php file. Please check the documentation for more info.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

    Best regards,
    Ismael

    #1216329

    Awesome! Almost there!

    Ismael, the css you gave me

    div .shop_columns_1 .products .product {
    	width: 100%;
    }

    works great everywhere except on mobile landscape for some reason. On mobile landscape, the product only takes up half the screen. Please see screenshot at link.

    Thank you!

    #1216333

    I decided to just stick with a 2-column product slider for the mobile landscape. So nevermind, I guess.

    Here is the the complete customization for a WooCommerce product slider with one product column at a time:

    1. Edit /enfold-child/functions.php by adding

    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
    function avia_include_shortcode_template($paths)
    {
      $template_url = get_stylesheet_directory();
          array_unshift($paths, $template_url.'/shortcodes/');
    
      return $paths;
    }

    2. In /enfold-child/ create folder “shortcodes”

    3. Copy productslider.php from /enfold/config-templatebuilder/avia-shortcodes/productslider/ to /enfold-child/shortcodes/

    4. Edit /enfold-child/shortcodes/productslider.php at line 240 by adding

    __( '1 Column', 'avia_framework' ) => '1',

    above

    __( '2 Columns', 'avia_framework' ) => '2',

    5. Edit /enfold-child/style.css by adding

    div .shop_columns_1 .products .product {
    	width: 100%;
    }

    6. In the Product Slider (Plugin Additions) in Avia Layout Builder, 1 column will now be an option under the style tab.

    Thanks for all the help!

    • This reply was modified 3 years, 10 months ago by perfectword. Reason: Trying to fix code
    #1217610

    Hi,

    Thank you for the info and guidelines.

    The css code should work as long as the column is set to 1. To add more priority to it, try to add the !important rule beside the width value.

    div .shop_columns_1 .products .product {
    	width: 100% !important;
    }
    

    Best regards,
    Ismael

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