Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • April 24, 2020 at 6:26 pm #1206898
    perfectword

    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!

    April 26, 2020 at 10:27 pm #1207384
    Nikko

    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

    April 26, 2020 at 10:37 pm #1207387
    perfectword

    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!

    April 28, 2020 at 4:59 pm #1207858
    Victoria

    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

    April 28, 2020 at 5:39 pm #1207879
    perfectword

    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.)

    May 4, 2020 at 3:43 pm #1209569
    Victoria

    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

    May 4, 2020 at 10:43 pm #1209750
    perfectword

    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!

    May 6, 2020 at 7:55 pm #1210459
    Victoria

    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

    May 6, 2020 at 8:13 pm #1210465
    perfectword

    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!

    May 8, 2020 at 6:25 pm #1211120
    Victoria

    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

    May 10, 2020 at 8:24 pm #1211699
    perfectword

    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!

    May 12, 2020 at 1:15 pm #1212155
    Victoria

    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

    May 14, 2020 at 1:03 am #1212799
    perfectword

    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!

    May 20, 2020 at 6:24 am #1214510
    Ismael

    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

    May 20, 2020 at 4:31 pm #1214710
    perfectword

    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!

    May 25, 2020 at 8:59 am #1216032
    Ismael

    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

    May 26, 2020 at 1:42 am #1216329
    perfectword

    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!

    May 26, 2020 at 2:34 am #1216333
    perfectword

    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 4 years, 6 months ago by perfectword. Reason: Trying to fix code
    May 29, 2020 at 8:48 am #1217610
    Ismael

    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

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