Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to customize Woocommerce Envira Galleries

Would you like to customize Woocommerce Envira Galleries for the checkout process? Maybe you’d like to show the gallery image in the cart or the gallery image title and caption? This is super easy to do with the help of a custom plugin. We’ll walk you through all the steps you need!

This tutorial is a bit more technical than our other docs, but we’ll walk you through the process step by step. In order to customize some Woocommerce checkout and cart options, we’ll need to create and upload a basic WordPress plugin.

Creating the Plugin

We’ll begin by creating a custom plugin. Just add the following code to a new file at wp-content/plugins/envira-gallery-customizing-woocommerce.php.

<?php
/**
* Plugin Name: Envira Gallery - Customizing Woocommerce Envira Galleries
* Plugin URI: https://enviragallery.com
* Version: 1.0
* Author: Envira Team
* Author URI: https://enviragallery.com
* Description: Change the cart image to an Envira gallery image.  Also change some button text and message text when using the Envira Add to Cart button.
*/

add_filter( 'woocommerce_cart_item_thumbnail', 'envira_woocommerce_cart_item_thumbnail', 5, 3 );
function envira_woocommerce_cart_item_thumbnail( $image_url, $cart_item, $cart_key ) {
	if ( isset( $cart_item['envira_woocommerce_image_id'] ) ) {
		$envira_image_id = $cart_item['envira_woocommerce_image_id'];
		return '<img src="'.wp_get_attachment_thumb_url ( $envira_image_id ).'" />';
	} else {
		return $image_url;
	}
}

// To change the add to cart item name (product name from Woo) 
add_filter( 'woocommerce_cart_item_name', 'envira_wc_cart_item_name_hyperlink', 10, 2 );
function envira_wc_cart_item_name_hyperlink( $link_text, $product_data ) {
	// Note: You also use envira_woocommerce_image_caption for the below
	if ( !isset( $product_data['envira_woocommerce_image_title'] ) ) {
		return $link_text;
	} else {
		$title = sanitize_text_field( $product_data['envira_woocommerce_image_title'] );
	}
   	return sprintf( '', get_permalink( $product_data['product_id'] ), $title );
}

// To change the add to cart text
add_filter( 'wc_add_to_cart_message_html', 'envira_custom_add_to_cart_message' );
function envira_custom_add_to_cart_message( $message ) {
	global $woocommerce;

	// Note: You also use envira_woocommerce_image_caption for the below
	if ( isset( $_POST['envira_woocommerce_image_title'] ) ) {
		$show_string = sanitize_text_field( $_POST['envira_woocommerce_image_title'] );
	} else {
		// if this doesn't exist, it's likely an Envira item wasn't added
		return $message;
	}

	$cart_url  = get_permalink( wc_get_page_id('cart') );
	$message   = sprintf('"%s" %s<a href="%s" class="button wc-forwards">%s</a>', 
						$show_string,
						__('has been added to your cart', 'woocommerce'), 
						$cart_url, 
						__(' View Cart', 'woocommerce') );

	return $message;
}

If you’re unsure how to create a plugin file, follow these steps below:

  1. Open a text file and make sure that it is a plain text document. You can use a plain text editor like Notepad or a code editor of your choice.
  2. Next, copy and paste the code shown above into the file and save the file as envira-gallery-customizing-woocommerce.php.
  3. Once you’ve saved the file you can easily upload this directly to your /plugins directory on your server using FTP or you can right-click on the text document and zip (or compress).
  4. Finally, log in to your WordPress dashboard and go to Plugins » Add New » Upload Plugin and upload the .zip file you just created in the previous step.

Activate the Plugin

Your final step is to activate the plugin. Go to Plugins and activate the plugin you just uploaded.

Activate the plugin to begin customizing some of the Woocommerce functionality on Envira galleries

That’s it! Would you like to create a gallery from any post type? Head over to the docs on How to use the Featured Content Addon.


FAQs

Q: Why is the link showing on the cart page?

A: If you’ve enabled the custom plugin from the How to use override your Woocommerce Redirect for Envira Galleries, then the link will show on the check out page with the above code.

You would either need to turn this plugin off or just remove the block 2 from the custom plugin as shown above.