This topic contains 6 replies, has 2 voices, and was last updated by  toughguppy 2 weeks, 6 days ago.

Customization to WooCommerce sidebar is not keeping CSS for widgets

  • Hi Leetheme,

    I’m doing a jewelry site so I need different sidebars for different categories. I have a jewelry sidebar, watches sidebar and engagement rings sidebar. They are currently showing on the correct page, but I have lost css styling for the two sidebars that were not programmed in the theme files. Can you please let me know how I can fix the below code to show the correct theme styling that comes with Alto for the widget areas?

    The price slider also breaks.

    Watches (showing correctly): http://www.toughguppyproductions.com/cdp2017/product-category/timepieces/

    Jewelry (not showing correctly): http://www.toughguppyproductions.com/cdp2017/product-category/jewelry/

    Engagement Rings (not showing correctly): http://www.toughguppyproductions.com/cdp2017/product-category/engagement-and-wedding/

    Or maybe there’s a different way where I can load sidebars based on the category selected.

    Thanks for your help.

    ARCHIVE-PRODUCT.php

    <?php elseif ($lt_opt['category_sidebar'] == 'left-sidebar') :?>
        <div class="large-3 left columns col-sidebar">
        <?php 
    	if ( is_product_category( 'engagement-and-wedding' )  || is_product_category( array( 'mens', 'womens', 'wedding-rings' ) ) ) {
    		
    		if (is_active_sidebar('shop-sidebar')) : dynamic_sidebar('engagementsidebar'); endif;
    		
    		}elseif  ( is_product_category( 'jewelry' )  || is_product_category( array( 'mens-jewelry', 'bracelts', 'earings-mens-jewelry', 'necklaces-mens-jewelry', 'rings-mens-jewelry', 'watches-mens-jewelry', 'womens-jewelry', 'bracelets', 'earrings', 'necklaces', 'rings', 'watches' ) ) ) {
    		
    					if (is_active_sidebar('shop-sidebar')) : dynamic_sidebar('jewelrysidebar'); endif;
    		
    		}else{
            if (is_active_sidebar('shop-sidebar')) : dynamic_sidebar('shop-sidebar'); endif;
    			 }
    ?>
    			 
        </div>
    <?php endif;?>
    Tom

    Hi,

    It was not wrappered by class: widget_price_filter:
    http://prntscr.com/g0sj45 => You must add class: http://prntscr.com/g0sjs3

    Best regards
    Tom

    Thanks for your response.

    I edited the file lt-product-filter-price.php and it did fix the one issue, but when I add the code to use the sub-file in functions.php file for the child theme the site breaks.

    I added…

    require get_stylesheet_directory() . ‘/widgets/lt-product-filter-price.php’;

    Seems strange that the css/functions are working when it’s the main shop page sidebar. I’m seeing the code that injects widget_price_filter, but the theme does not inject “widget_price_filter” into the sidebars I created. I’m also losing styling for the rest of the sidebar so this fix will only help for this one widget. I would like these sidebars to be consistent with the sidebars everywhere else in the theme and all widget styling to be included.

    Tom

    Hi,

    In jQuery of Woocommerce, filter price will change slide by class “widget_price_filter”, so that you must add class for it and custom css in your child-theme at your custom widget you create.

    Thank and best regards,
    Tom

    Thanks again for responding.

    If the class and functionality exists for one sidebar why do I have to recreate it? Is there something I can wrap the sidebar in that will allow the script to function correctly? I’m not doing any customizing other than an if statement for category. The sidebar should look exactly the same. Are you saying that I have to recreate the look and functionality for these sidebars to work and look like the others?

    I’m not creating custom widgets, I’m just trying to swap out the sidebar so a different sidebar shows for each category. I’m thinking there’s gotta be a way to take what css already exists. I don’t understand why the class for “widget_price_filter” is not being added to that widget in the other sidebar. How do I make that statement happen for any other sidebar I may want to swap out?

    You’re saying that I need to inject “widget_price_filter” into the form tag within child theme’s version of the archive product page. How do I do that without the theme breaking?

    Tom

    Hi,

    In our alto, We only style for filter price at wrapper by .widget_price_filter, so that you can create custom filter price, if you don’t use wrapper “widget_price_filter”, You would must style for your custom.

    Best regards,
    Tom

    I did not customize any widgets. I added a sidebar.

    The widgets are added the same exact way to all sidebars. I would think that since everything works correctly on all other sidebars there has to be a way to add three sidebars that show based on category. I apologize for repeating myself, but your focusing on one issue of a bigger problem.

    Let’s simplify the question:

    How do I add an alternative sidebar to the shop page and keep all the functionality and css styling?

    If it’s not possible just tell me that it isn’t. I don’t want to re-style/rebuild every single widget added to those sidebars. I would like the theme styling/functionality to carry over.

    Also, changing the file to add the class in the child theme breaks the site so I need help implementing your solution. Have you tested it? Why is it breaking when I add it to the child theme folder?

You must be logged in to reply to this topic.