Created
June 16, 2019 10:15
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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