Back to Posts

Personalization

Author icon
By Becca - November 30th, 2018- in Resources

One of the most incredible benefits of print-on-demand is the potential for infinite personalization options. Gone are the days of disappointedly searching for a personalized keychain with your less-than-common name. Print-on-Demand services allow you to satisfy the personalization needs of all of your customers without any additional investment on your end.

CustomCat makes personalization easy, allowing you to create personalized designs from any design in your Design Library. Read on for tutorials on creating personalized designs & how to set up personalization on your website.

 

How Do I Create a Personalized Design in My Design Library?

 

**Please note that the text added to your design in this stage will not be printed. Your customer will enter their personalization text on your site to be printed in its place. The text entered in this stage is for demonstration of personalized text placement, font, & color only. 

***Additional note: If your customer purchases a personalized product without entering their personalization text, their product will be printed with the design only & no text.

 

How Do I Set Up Personalization on WooCommerce?

 

Step 1: Locate the functions.php for your theme by logging in your WordPress dashboard and go to Appearance > Theme Editor.

This will bring you to a page where you can edit your theme files. These files are listed on the right-hand side. Your current theme is selected by default. Locate the file labeled “Theme Functions” and click it as shown here:

 

Step 2: Add the following code. If you change or upgrade your theme, please make sure the new code is in the current functions.php file of the upgraded or new theme.

add_filter(‘woocommerce_add_cart_item_data’,’customcat_add_item_data’,10,3); function customcat_add_item_data($cart_item_data, $product_id, $variation_id) { if(isset($_REQUEST[‘your_design’])) { $cart_item_data[‘your_design’] = wp_strip_all_tags($_REQUEST[‘your_design’]); } return $cart_item_data; } add_filter(‘woocommerce_get_item_data’,’customcat_add_item_meta’,10,2); function customcat_add_item_meta($item_data, $cart_item) { if(array_key_exists(‘your_design’, $cart_item)) { $custom_details = $cart_item[‘your_design’]; $item_data[] = array( ‘key’ => ‘Your Design’, ‘value’ => ‘<a href=”‘ . $custom_details . ‘” target=”_blank” /> <img src=”‘ . $custom_details . ‘”/></a>’ ); } return $item_data; } add_action(‘woocommerce_checkout_create_order_line_item’, ‘customcat_add_custom_order_line_item_meta’,10,4); function customcat_add_custom_order_line_item_meta($item, $cart_item_key, $values, $order) { if(array_key_exists(‘your_design’, $values)) { $item->add_meta_data(‘your_design’,$values[‘your_design’]); } } add_action(‘wp_enqueue_scripts’, ‘customcat_enqueue_scripts’,10,5); function customcat_enqueue_scripts() { global $product; if (is_product()) { $product = wc_get_product(); $short_descr = $product->get_short_description(); if (strpos($short_descr, ‘cc-overlay’) != false) { wp_register_script(‘custom_cat_script_1’, ‘https://dynamic-cdn.azureedge.net/theme/CustomCat/js/ccCustomize.min.js’, array( ‘jquery’), NULL, true); wp_enqueue_script(‘custom_cat_script_1’); wp_register_script(‘custom_cat_script_2’, ‘https://app.customcat.com/js/customize_woo.js’ , array(‘jquery’), NULL, true); wp_enqueue_script(‘custom_cat_script_2’); } } }

 

Step 3: Select update file.

 

What if the customize button on my cart page is displaying customize versus add to cart for non-personalized products?

To fix this error, click on the product to edit in WooCommerce and navigate to the Product short description box. Click the “Text” button.

Remove the following code circled in red as shown here:

“<div id=”cc-overlay”></div><br>”

 

Final Step: Update your product page by selecting the “update” button.

 

How Do I Set Up Personalization on Shopify?

 

Click “Online Store” in the left menu

Click Actions and select “Edit Code”

Select “cart.liquid” under “Templates” in the left menu. Please note, depending on your Shopify theme, the contents of the cart.liquid template can be found in/sections/cart-template.liquid.

Search for “<img src=” in the code. It will look something like the following:

<a href=”{{ item.url }}”> <img src=”{{ item | img_url: ‘small’ }}” alt=”{{ item.title | escape }}” > </a>

 

Add the following after the </a> that wraps the <img…> tag.

{% assign property_size = item.properties | size %} {% if property_size > 0 %} {% for p in item.properties %} {% unless p.last == blank %} <div style=”display:none”>{{ p.last }}</div> {% endunless %} {% endfor %} {% endif %}

Add the following at the  very bottom of the file:

<script> jQuery(function(){ jQuery(“p:contains(‘YourDesign’)”).css(“display”,”none”); jQuery(“._YourDesign”).each(function( i ) { img_url = $(this).html(); img_width = $(this).siblings(“a”).children(“img”).width(); jQuery(this).siblings(“a”).children(“img”).attr(“src”, img_url.replace(/&amp;/g, “&”)); jQuery(this).siblings(“a”).children(“img”).width(img_width); }); }); </script>

 

Shopify Personalization FAQs

Q: If I already have the app installed, do I need to sign up again or make any changes to use the personalization feature? 

A: Personalization is automatically added to the app, but we highly recommend the following steps in the above instructions to ensure the best experience for your customers. 

Q: What products are available for personalization? 

A: All products except for embroidery products. 

Q: What if the Customization button does not appear on your product page in the place of the “Add to Cart” button? 

A: Make sure that you have not inadvertently removed the CustomCat code snippet from Description HTML. Sometimes bulk editing apps can delete HTML code as well. This is the required code so be cautious when editing your product description.

To confirm the correct Personalization Code is present, you should perform the following:

1. Log into the Shopify Admin with your login credentials.

2. Navigate to Products -> Select on the product you would like to update.

3. Click the Show HTML button to view the HTML code for the content inside the rich text editor:

This snippet of code should be present at the very top:

<div id=”cc-overlay” style=”display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.7); z-index: 2;”><img src=”//api.mylocker.net/images/loading.gif”></div> <script src=”//customcat.mylocker.net/js/ccCustomize.min.js?v=10.3.4″ type=”text/javascript”></script> <script src=”//customcat.mylocker.net/js/customize.shopify.min.js?v=10.3.4″ type=”text/javascript”></script> <script>// <![CDATA[ document.getElementById(“cc-overlay”).style.display =”block”; // ]]></script>

4. Make sure to save your changes.

If the tip above does not fix your issue, send an email to [email protected] with the link to the product that does not show “customize”, your theme, cart.liquid txt file and any other information describing your issue. 

Q: What if an unnecessary text is showing during the “Add to Cart” step? 

A: Please make sure you have added the “Add to Cart” code (which you can find above on this page) in the appropriate place in your theme files.

Q: What if the product image in the cart does not show the customized text from the previous step? 

A: Please make sure you have added the “Add to Cart” code (which you can find above on this page) in the appropriate place in your theme files.

Q: How can I add a new front for my personalization? 

A: Email the font name and font file (if possible) to [email protected] CustomCat will do a full licensing search to make sure we have the right to use the font and that the font has all of our required characters. Please note that we love suggestions but we have to look into each request. 

Q: Can I use special characters (Kanji, accents, etc.)? 

A: No. Kanji, Emojis, Foreign Characters, Accents, and other special characters cannot be used and will result in unintended characters printing on your products. Characters on your keyboard such as ?, !, etc. can be used without issue. We strongly recommend mentioning this verbiage in your FAQs.

 

6 thoughts on “Personalization

Comments are closed.