Support » Theme: Twenty Nineteen » How to override woocommerce “class-wc-twenty-nineteen.php” in child theme

  • Resolved isadoe

    (@isadoe)


    Hi 🙂

    I am using my own child theme (from Twenty Nineteen) for my e-shop with woocommerce.

    I would like to change the width for my products “main image”. It is set to 450px and I’d like to set it to 600px.

    I read a lot of forum threads about similar issues and here is what I learnt:

    1) I should be able to customize this width in Appearance > Customize > WooCommerce > Product Images but the option is not shown here.

    2) It is because my main theme (Twenty Nineteen) has declared WooCommerce support and defined those settings itself. And if so, the settings are removed from the customizer.

    3) After a while I found where those settings were defined: in /wp-content/plugins/woocommerce/includes/theme-support/class-wc-twenty-nineteen.php :

    <?php
    /**
     * Twenty Nineteen support.
     *
     * @since   3.5.X
     * @package WooCommerce/Classes
     */
    
    defined( 'ABSPATH' ) || exit;
    
    /**
     * WC_Twenty_Nineteen class.
     */
    class WC_Twenty_Nineteen {
    
    	/**
    	 * Theme init.
    	 */
    	public static function init() {
    
    		// Change WooCommerce wrappers.
    		remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
    		remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
    
    		add_action( 'woocommerce_before_main_content', array( __CLASS__, 'output_content_wrapper' ), 10 );
    		add_action( 'woocommerce_after_main_content', array( __CLASS__, 'output_content_wrapper_end' ), 10 );
    
    		// This theme doesn't have a traditional sidebar.
    		remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    
    		// Enqueue theme compatibility styles.
    		add_filter( 'woocommerce_enqueue_styles', array( __CLASS__, 'enqueue_styles' ) );
    
    		// Register theme features.
    		add_theme_support( 'wc-product-gallery-zoom' );
    		add_theme_support( 'wc-product-gallery-lightbox' );
    		add_theme_support( 'wc-product-gallery-slider' );
    		add_theme_support( 'woocommerce', array(
    			'thumbnail_image_width' => 300,
    >>>>>>>>>>>>>>>>>>>>>>>>>'single_image_width'    => 450,
    		) );
    
    		// Tweak Twenty Nineteen features.
    		add_action( 'wp', array( __CLASS__, 'tweak_theme_features' ) );
    
    		// Color scheme CSS
    		add_filter( 'twentynineteen_custom_colors_css', array( __CLASS__, 'custom_colors_css' ), 10, 3 );
    	}
    
    	/**
    	 * Open the Twenty Nineteen wrapper.
    	 */
    	public static function output_content_wrapper() {
    		echo '<section id="primary" class="content-area">';
    		echo '<main id="main" class="site-main">';
    	}
    
    	/**
    	 * Close the Twenty Nineteen wrapper.
    	 */
    	public static function output_content_wrapper_end() {
    		echo '</main>';
    		echo '</section>';
    	}
    
    	/**
    	 * Enqueue CSS for this theme.
    	 *
    	 * @param  array $styles Array of registered styles.
    	 * @return array
    	 */
    	public static function enqueue_styles( $styles ) {
    		unset( $styles['woocommerce-general'] );
    
    		$styles['woocommerce-general'] = array(
    			'src'     => str_replace( array( 'http:', 'https:' ), '', WC()->plugin_url() ) . '/assets/css/twenty-nineteen.css',
    			'deps'    => '',
    			'version' => WC_VERSION,
    			'media'   => 'all',
    			'has_rtl' => true,
    		);
    
    		return apply_filters( 'woocommerce_twenty_nineteen_styles', $styles );
    	}
    
    	/**
    	 * Tweak Twenty Nineteen features.
    	 */
    	public static function tweak_theme_features() {
    		if ( is_woocommerce() ) {
    			add_filter( 'twentynineteen_can_show_post_thumbnail', '__return_false' );
    		}
    	}
    
    	/**
    	 * Filters Twenty Nineteen custom colors CSS.
    	 *
    	 * @param string $css           Base theme colors CSS.
    	 * @param int    $primary_color The user's selected color hue.
    	 * @param string $saturation    Filtered theme color saturation level.
    	 */
    	public static function custom_colors_css( $css, $primary_color, $saturation ) {
    		if ( function_exists( 'register_block_type' ) && is_admin() ) {
    			return $css;
    		}
    
    		$lightness = absint( apply_filters( 'twentynineteen_custom_colors_lightness', 33 ) );
    		$lightness = $lightness . '%';
    
    		$css .= '
    			.onsale,
    			.woocommerce-info,
    			.woocommerce-store-notice {
    				background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' );
    			}
    
    			.woocommerce-tabs ul li.active a {
    				color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' );
    				box-shadow: 0 2px 0 hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' );
    			}
    		';
    
    		return $css;
    	}
    }
    
    WC_Twenty_Nineteen::init();

    4) When I write 600 instead of 450 (“>>>>>>>>>>>>>>>>>>>>>>>>>” line in the code above) and regenerate my thumbnails, it works! But I know that as soon as I’ll update woocommerce next, my edit will be lost. I would like to make this change in my child theme and not directly in woocommerce folders.

    5) Here is the issue: I tried different ways of adding the code to my child theme but none of them worked.
    – > Reading articles like this one I added this code to my child theme’s functions.php:

    function mytheme_add_woocommerce_support() {
        add_theme_support( 'woocommerce', array(
    			'thumbnail_image_width' => 300,
    			'single_image_width'    => 600,
    		) );
    }
    add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

    – > I also tried to copy the class-wc-twenty-nineteen.php file in my child theme and edit it the way I want, hoping it would override the one in woocommerce folder (didn’t work either ^^)

    Any idea of how to add this simple change to my child theme to avoid editing the woocommerce file over and over each time I have to update the plugin?

    Thank you
    Isabelle

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Try adding remove_theme_support before the add_theme_support in your code, something like the following

    function doe_thumbnail_width() {
    	remove_theme_support( 'woocommerce' );
    	add_theme_support( 'woocommerce', array(
    		'thumbnail_image_width' => 300,
    		'single_image_width' => 600,
    	) );
    }
    
    add_action( 'after_setup_theme', 'doe_thumbnail_width', 11 );

    Hi Jarret, thank you for your answer but saddly it doesn’t work either 🙁

    Hi again,

    Does anybody have another idea on how to solve my issue please?

    Isabelle

    Hmm, just to be clear, on the page that you linked you’re wanting the image of the postcards with the leaves on the left/right side of the image to be 600px wide?

    Looking at the current width of the image area, additional CSS would be needed for it to be able to fit a 600px wide image as the current width for the main image along with the mini-gallery beneath is only 579px wide.

    Hi Jarret,

    Yes you’re right, 579px would be the correct width. In fact, all I want is the image to be displayed full width in its column: I said 600 as a rounded figure. When I use 600px instead of 450px in the original “class-wc-twenty-nineteen.php” file it works all fine, my only issue is that I don’t know how to write this permanently in my child theme.

    Hi again,

    My problem is solved 🙂 A few days ago I also asked for help on the Woocommerce support forum (since the issue were related to both Twenty Nineteen theme and Woocommerce plugin) and today we found what was wrong there (see the thread here).

    A curly bracket was misplaced in my child-theme functions.php. Once it was moved to its right place, adding the following code to the file made me able to custom the main image width:

    function mytheme_add_woocommerce_support() {
        add_theme_support( 'woocommerce', array(
    			'thumbnail_image_width' => 300,
    			'single_image_width'    => 600,
    		) );
    }
    add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

    Thank you Jarret for trying to help, you couldn’t find what was wrong without having access to my functions.php file.
    Have a nice day,
    Isabelle

    • This reply was modified 1 month, 3 weeks ago by isadoe.
    • This reply was modified 1 month, 3 weeks ago by isadoe.
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.