• Resolved andyt1980

    (@andyt1980)


    Hi,
    I’m using a child theme but when updating the parent theme from 1.5.3 to 2.0.3 it causes some CSS issues.

    You can see the site running theme version 2.0.3 here:
    https://tinyurl.com/zyw5m2j

    You can see the site using theme version 1.5.3 here, this is how it should look:
    https://tinyurl.com/zrbhp9o

    It seems to be affecting the container width, navigation bar, search field, home & interiors category. On internal pages its affecting the breadcrumb and page titles.
    It’s also affecting the background colour of the menu in mobile/tablet view.

    I’ve pasted my child themes functions file for your consideration:

    <?php
    
    /* Re-arranges order of sidebar and content, so product categories display first in mobile/tablet view. */
    
    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    add_action( 'storefront_content_top', 'storefront_get_sidebar' );
    
    /**
     * Alters the output of the homepage product categories on the Storefront theme
     * Affects the storefront_product_categories_args filter in /inc/structure/template-tags.php
     */
    
    function sd_display_all_home_product_categories( $args ) {
    
    	// Sets the maximum product categories to 50, you can increase this to display more if need be.
    	$args['limit'] = 6;
    
    	// Output
    	return $args;
    
    }
    add_filter( 'storefront_product_categories_args', 'sd_display_all_home_product_categories' );
    
    if ( ! function_exists( 'storefront_product_categories' ) ) {
    	/**
    	 * Display Product Categories
    	 * Hooked into the <code>homepage</code> action in the homepage template
    	 * @since  1.0.0
    	 * @return void
    	 */
    	function storefront_product_categories( $args ) {
    
    		if ( is_woocommerce_activated() ) {
    
    			$args = apply_filters( 'storefront_product_categories_args', array(
    				'limit' 			=> 3,
    				'columns' 			=> 3,
    				'child_categories' 	=> 0,
    				'orderby' 			=> 'name',
    				'title'				=> __( 'Product Categories', 'storefront' ),
    				) );
    
    			echo '<section class="storefront-product-section storefront-product-categories">';
    
    				do_action( 'storefront_homepage_before_product_categories' );
    
    				echo '<h2 class="section-title">' . wp_kses_post( $args['title'] ) . '</h2>';
    
    				do_action( 'storefront_homepage_after_product_categories_title' );
    
    				echo storefront_do_shortcode( 'product_categories',
    					array(
    						'number' 	=> intval( $args['limit'] ),
    						'columns'	=> intval( $args['columns'] ),
    						'orderby'	=> esc_attr( $args['orderby'] ),
    						'parent'	=> esc_attr( $args['child_categories'] ),
    						) );
    
    				do_action( 'storefront_homepage_after_product_categories' );
    
    			echo '</section>';
    
    			echo '<ul class="products">
    					<li class="product-category product home-interiors">
    						<a href="https://preview.rosesandribbons.gridhosted.co.uk/product-category/home-interiors/">
    						<img src="https://preview.rosesandribbons.gridhosted.co.uk/wp-content/uploads/2016/05/HOME-INTERIORS.jpg"></img>
    						<h3>HOME & INTERIORS</h3>
    						</a>
    
    					</li>
    
    			</ul>';	
    
    		}
    	}
    }
    
    /**
     * Add logo without Jetpack
     */
    
    add_action( 'init', 'storefront_custom_logo' );
    function storefront_custom_logo() {
    remove_action( 'storefront_header', 'storefront_site_branding', 20 );
    add_action( 'storefront_header', 'storefront_display_custom_logo', 20 );
    }
    
    function storefront_display_custom_logo() {
    ?>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo-link" rel="home">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.jpg" alt="<?php echo get_bloginfo( 'name' ); ?>" />
    </a>
    <?php
    }
    
    /**
     * Re-arranges order of Cart section in header
     */
    
    add_action( 'init', 'jk_remove_storefront_cart' );
    function jk_remove_storefront_cart() {
    add_action( 'storefront_header', 'storefront_header_cart', 35 );
    remove_action( 'storefront_header', 'storefront_header_cart', 60 );
    }
    
    /* Removing sections from homepage */
    
    function rosesribbons_remove_recent_products_homepage() {
    	remove_action( 'homepage', 'storefront_recent_products', 30 );
    }
    add_action ('init', 'rosesribbons_remove_recent_products_homepage');
    
    function rosesribbons_remove_popular_products_homepage() {
    	remove_action( 'homepage', 'storefront_popular_products', 50 );
    }
    add_action ('init', 'rosesribbons_remove_popular_products_homepage');
    
    function rosesribbons_remove_onsale_products_homepage() {
    	remove_action( 'homepage', 'storefront_on_sale_products', 60 );
    }
    add_action ('init', 'rosesribbons_remove_onsale_products_homepage');
    
    function remove_loop_button(){
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    }
    add_action('init','remove_loop_button');
    
    /* Alters copyright info */
    
    if ( ! function_exists( 'storefront_credit' ) ) {
        function storefront_credit() {
          ?>
    	<div class="site-info">
    	<img style="margin-bottom: 10px;" src="/wp-content/uploads/2016/06/payment-logos-2.png"></img>
    
    		? <?php echo get_the_date( 'Y' ) . ' ' . get_bloginfo( 'name' ) ; ?> - Flowers - Gifts - Interiors | All Right Reserved  <span class="listed-web">Listed Website Design T: 01698 40 20 30</span>
     	</div><!-- .site-info -->
    	<?php
        }
    }
    
    /* Removes long description field from post editor */
    
    function remove_product_editor() {
      remove_post_type_support( 'product', 'editor' );
    }
    add_action( 'init', 'remove_product_editor' );

    Any help much appreciated.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter andyt1980

    (@andyt1980)

    Any help with this? – otherwise I’ll have to dig through and try to correct the CSS myself.

    andyt1980 a question, as you costomisou your menu this way that on your website?

    Thread Starter andyt1980

    (@andyt1980)

    Yes but the menu isnt the only issue and why should a theme update effect the CSS?.

    Thread Starter andyt1980

    (@andyt1980)

    Any help appreciated James Koster.

    after update my child theme’s style css doesnt work ??

    @kaktusistanbul: This is not your topic. If you require assistance then, as per the Forum Welcome, please post your own topic.

    Sorry in the delay in getting back to you andyt1980. Looks like the breadcrumb / nav bg colors are the main issues here.

    .storefront-primary-navigation,
    .woocommerce-breadcrumb {
    background-color: transparent !important;
    }

    That snippet should take care of that.

    For the cart button in the header, try removing the top padding;

    .site-header-cart .cart-contents {
    padding-top: 0;
    }

    Are you using a plugin for the handheld menu? Doesn’t look like the Storefront core navigation.

    Thread Starter andyt1980

    (@andyt1980)

    Thanks for the CSS will try that when I get back from holiday.
    I’m using the Max Mega Menu plugin for the menu as I wanted sub-menus working for mobile/tablet.

    I see, I haven’t used that plugin personally so am unfamiliar with it. Best to ask them for support in that regard I think.

    Thread Starter andyt1980

    (@andyt1980)

    I’ve now added the CSS you gave me which has fixed some of the issues.

    However, I still have an issue with the container width. The site using the later theme version has a width of 1074px, the older version has the required container width of 977px (I can’t seem to find the CSS I used to achieve this).

    Also, on the home page the Featured Products title has changed to We Recommend. There is now an unwanted Best Sellers section too at the bottom of the home page.

    Any help with these issues much appreciated.

    Thread Starter andyt1980

    (@andyt1980)

    I’ve also just discovered when I add a product to the cart in the updated version, the confirmation message and product details is displaying below the product categories sidebar and not in-line with the sidebar as it does with previous version.

    Thread Starter andyt1980

    (@andyt1980)

    ok, I’ve managed to fix most the issues myself. After downloading version 1.5 of the theme and testing it locally it seems it is 977px wide by default.

    With the new theme I had to change the .col-full width from 67.141em to 61.1em to achieve the same width.

    I still have an issue when adding a product to the cart the confirmation message and product details are displaying below the product categories sidebar. I think this may be because of the custom code I added to the functions file to make the product categories display before the product images in mobile/tablet view:

    /* Re-arranges order of sidebar and content, so product categories display first in mobile/tablet view. */
    
    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    add_action( 'storefront_content_top', 'storefront_get_sidebar' );

    However, with the old theme version even with this custom code in place the confirmation message/product details still displayed in-line with the product categories.

    Any help much appreciated.

    Thread Starter andyt1980

    (@andyt1980)

    After some more research and testing I managed to resolve this by changing:

    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    add_action( 'storefront_content_top', 'storefront_get_sidebar' );

    to

    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    add_action( 'storefront_content_top', 'storefront_get_sidebar', 20 );

    Werhoo!!! ??

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Theme Update Issue’ is closed to new replies.