WooCommerce – Switch Image Background On Color Variation Selection (Image Gallery & Navigation Thumbnails)

Setup: WooCommerce Variable Product for t-shirts with multiple colors and multiple sizes. Theme: GeneratePress.

Primary image is of a t-shirt with artwork on it. Secondary image is a close-up of just the artwork with a colored background that matches the color of the t-shirt. Since there are multiple t-shirt colors (and multiple designs), I don’t want to have to produce every close-up with a different color background in an image-editing program. It’s very time-consuming, and each graphic adds weight to the page. This process of displaying a CSS background color behind a transparent PNG file was inspired by Business Bloomer’s article (but their code only works for the product image gallery background color and not the navigation thumbnail background color).

Method: Produce one piece of artwork in transparent PNG format to use for the Image Gallery and Navigation Thumbnail.

I used ChatGPT to generate the code to display the various background colors behind a transparent PNG file in image gallery and navigation thumbnail.

Place the code in a WordPress child theme.

functions.php file:

// ChatGPT: This code registers and enqueues the custom.js script file, and ensures that it is loaded after the jQuery library.
// Also only loads the custom.js file on WooCommerce Product pages via if ( is_product() ).
function enqueue_custom_scripts() {
    if ( is_product() ) {
        wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );

jQuery file:

Create a folder in Child Theme called js, with the below code in a file called custom.js.

jQuery(document).ready(function($) {
  // Function to update the background color of the gallery and thumbnails
  function updateGalleryColor(color) {
    $('.woocommerce-product-gallery figure .woocommerce-product-gallery__image img').css('background-color', color);
    $('.woocommerce-product-gallery .flex-control-thumbs li img').css('background-color', color);
  }
  
  // Get the default color and set the gallery and thumbnails background color (based on Default Form Values in Product Variation tab)
  var defaultColor = $('select[name="attribute_pa_color"]').val();
  // Set the background color based on the default color value
  switch (defaultColor) {
    case 'aqua-triblend':
      updateGalleryColor('#33869F');
      break;
    case 'berry-triblend':
      updateGalleryColor('#BC437C');
      break;
    case 'blue-triblend':
      updateGalleryColor('#62749B');
      break;
    case 'brown-triblend':
      updateGalleryColor('#563e32');
      break;
    case 'charcoal-black-triblend':
      updateGalleryColor('#171b19');
      break;
    case 'clay-triblend':
      updateGalleryColor('#9a5344');
      break;
    case 'emerald-triblend':
      updateGalleryColor('#142C1E');
      break;
    case 'grey-triblend':
      updateGalleryColor('#766d66');
      break;
    case 'maroon-triblend':
      updateGalleryColor('#5d323e');
      break;
    case 'navy-triblend':
      updateGalleryColor('#464d7e');
      break;
    case 'purple-triblend':
      updateGalleryColor('#5f4172');
      break;
    case 'red-triblend':
      updateGalleryColor('#B4333C');
      break;
    case 'teal-triblend':
      updateGalleryColor('#156560');
      break;
    case 'true-royal-triblend':
      updateGalleryColor('#2E4C86');
      break;
    default:
      // Reset the background color if no color is selected
      updateGalleryColor('');
  }
  // Event listener for the color variation dropdown
  $('select[name="attribute_pa_color"]').on('change', function() {
    // Get the selected color value
    var selectedColor = $(this).val();
    // Set the background color of the gallery and thumbnails based on the selected color
    switch (selectedColor) {
      case 'aqua-triblend':
        updateGalleryColor('#33869F');
        break;
      case 'berry-triblend':
        updateGalleryColor('#BC437C');
        break;
      case 'blue-triblend':
        updateGalleryColor('#62749B');
        break;
      case 'brown-triblend':
        updateGalleryColor('#563e32');
        break;
      case 'charcoal-black-triblend':
        updateGalleryColor('#171b19');
        break;
      case 'clay-triblend':
        updateGalleryColor('#9a5344');
        break;
      case 'emerald-triblend':
        updateGalleryColor('#142C1E');
        break;
      case 'grey-triblend':
        updateGalleryColor('#766d66');
        break;
      case 'maroon-triblend':
        updateGalleryColor('#5d323e');
        break;
      case 'navy-triblend':
        updateGalleryColor('#464d7e');
        break;
      case 'purple-triblend':
        updateGalleryColor('#5f4172');
        break;
      case 'red-triblend':
        updateGalleryColor('#B4333C');
        break;
      case 'teal-triblend':
        updateGalleryColor('#156560');
        break;
      case 'true-royal-triblend':
        updateGalleryColor('#2E4C86');
        break;
      default:
        // Reset the background color if no color is selected
        updateGalleryColor('');
    }
  });
});

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *