Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save conschneider/0cfdb64cd3faf138c16e026573a294a2 to your computer and use it in GitHub Desktop.
Save conschneider/0cfdb64cd3faf138c16e026573a294a2 to your computer and use it in GitHub Desktop.
This enables custom image sizes for WooCommerce in the Customizer even when the theme has declared the images sizes. This works with the Storefront theme.
<?php
/*
Plugin Name: Custom Image Sizes for WooCommerce
Plugin URI: https://themebynumbers.com/
Description: Let's you customize WooCommerce product image sizes from the Customizer
Version: 0.1
Author: Mikey Arce
Author URI: https://themebynumbers.com
Text Domain: custom_image_sizes_for_wc
Domain Path: /languages
License: GPL2
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
class Custom_Image_Sizes_WC {
public function __construct() {
add_action( 'customize_register', array( $this, 'cisfw_woocommerce_image_size_options' ) );
add_action( 'after_setup_theme', array($this, 'set_custom_image_sizes'), 11 );
}
public function cisfw_woocommerce_image_size_options( $wp_customize ) {
if ( wc_get_theme_support( 'thumbnail_image_width' ) ) {
$wp_customize->add_setting(
'custom_woocommerce_thumbnail_image_width',
array(
'default' => 300,
'type' => 'option',
'capability' => 'manage_woocommerce',
'sanitize_callback' => 'absint',
'sanitize_js_callback' => 'absint',
)
);
$wp_customize->add_control(
'custom_woocommerce_thumbnail_image_width',
array(
'label' => __( 'Catalog/Shop Thumbnail image width', 'custom_image_sizes_for_wc' ),
'description' => __( 'Image size used for products in the catalog.', 'custom_image_sizes_for_wc' ),
'section' => 'woocommerce_product_images',
'settings' => 'custom_woocommerce_thumbnail_image_width',
'type' => 'number',
'input_attrs' => array(
'min' => 0,
'step' => 1,
),
)
);
}
if ( wc_get_theme_support( 'single_image_width' ) ) {
$wp_customize->add_setting(
'custom_woocommerce_single_image_width',
array(
'default' => 600,
'type' => 'option',
'capability' => 'manage_woocommerce',
'sanitize_callback' => 'absint',
'sanitize_js_callback' => 'absint',
)
);
$wp_customize->add_control(
'custom_woocommerce_single_image_width',
array(
'label' => __( 'Single Product image width', 'custom_image_sizes_for_wc' ),
'description' => __( 'Image size used for the main image on single product pages. These images will remain uncropped.', 'custom_image_sizes_for_wc' ),
'section' => 'woocommerce_product_images',
'settings' => 'custom_woocommerce_single_image_width',
'type' => 'number',
'input_attrs' => array(
'min' => 0,
'step' => 1,
),
)
);
}
$wp_customize->add_setting(
'custom_woocommerce_gallery_thumbnail_image_size',
array(
'default' => 100,
'type' => 'option',
'capability' => 'manage_woocommerce',
'sanitize_callback' => 'absint',
'sanitize_js_callback' => 'absint',
)
);
$wp_customize->add_control(
'custom_woocommerce_gallery_thumbnail_image_size',
array(
'label' => __( 'Single Product Thumbnail image width', 'custom_image_sizes_for_wc' ),
'description' => __( 'Image size used for the thumbnail gallery on single product pages. These images will be cropped into squares.', 'custom_image_sizes_for_wc' ),
'section' => 'woocommerce_product_images',
'settings' => 'custom_woocommerce_gallery_thumbnail_image_size',
'type' => 'number',
'input_attrs' => array(
'min' => 0,
'step' => 1,
),
)
);
}
public function set_custom_image_sizes() {
// Filter the size of the WooCommerce Thumbnail
// These are the product images that appear on the Catalog (Shop page)
add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
$woocommerce_thumbnail_width = get_option('custom_woocommerce_thumbnail_image_width');
$woocommerce_thumbnail_cropping = get_option('woocommerce_thumbnail_cropping');
$cropping = get_option( 'woocommerce_thumbnail_cropping' );
switch ( $cropping ) {
case 'uncropped':
$custom_height = '';
$custom_crop = 0;
break;
case 'custom':
$width = max( 1, get_option( 'woocommerce_thumbnail_cropping_custom_width' ) );
$height = max( 1, get_option( 'woocommerce_thumbnail_cropping_custom_height' ) );
$custom_height = absint( round( ( $woocommerce_thumbnail_width / $width ) * $height ) );
$custom_crop = 1;
break;
case '1:1':
$cropping_split = explode( ':', $cropping );
$width = max( 1, current( $cropping_split ) );
$height = max( 1, end( $cropping_split ) );
$custom_height = absint( round( ( $woocommerce_thumbnail_width / $width ) * $height ) );
$custom_crop = 1;
break;
}
return array(
'width' => $woocommerce_thumbnail_width,
'height' => $custom_height,
'crop' => $custom_crop,
);
} );
// Filter the size of the WooCommerce Single Product page image.
add_filter( 'woocommerce_get_image_size_single', function( $size ) {
$woocommerce_custom_single_product_width = get_option( 'custom_woocommerce_single_image_width' );
return array(
'width' => $woocommerce_custom_single_product_width,
'height' => '',
'crop' => 0,
);
} );
// Filter the size of the WooCommerce Single Product page thumbnails.
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
$woocommerce_custom_single_gallery_thumbnail_width = get_option( 'custom_woocommerce_gallery_thumbnail_image_size' );
return array(
'width' => $woocommerce_custom_single_gallery_thumbnail_width,
'height' => $woocommerce_custom_single_gallery_thumbnail_width,
'crop' => 1,
);
} );
}
}
new Custom_Image_Sizes_WC();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment