Category Archives: Tips and Tricks

Custom Products, MyStyle Customizer, MyStyle WP Plugin Updates, New Features, Printing, Tips and Tricks, Woo Commerce, Wordpress

New Feature: Build Your Own Custom Product Templates in WordPress!

We’re happy to announce a highly-requested feature that may change the way you do your product templates forever:  Build Your Own Custom Product Templates right in the WordPress/WooCommerce Admin!

Traditional MyStyle Product Templates: Now Optional for DIY Webmasters!

Normally we set up each template by hand for each client, and provide the template IDs for use in their website(s).  This is still a service that is available, but is no longer required for most one-sided templates if you want to develop them yourself!

New DIY Custom Templates

Our new custom template options can be found the WooCommerce Product Data section of any product, in the MyStyle > Advanced tab.

See the screenshot below, where the example is setting up a Rectangular 18×14 inch product template:

mystyle-customizer-define-your-own-custom-template-print-specs-size

With these two checkboxes, a width and a height, you’re good to go with a basic rectangular template!  It will size down automatically to fit the web browser while designing, and it will render your print files at the full size when generating a print file.

Beta Features: Add Image Layers and More

There are even more beta features beneath these basic settings that are still being tested, but you can try those out to add image layers to your templates, like a background or foreground.  We’ll cover those features in another upcoming post.

Enjoy!

Tips and Tricks, User Experience, Woo Commerce, Wordpress

CSS Tip: Show Your WooCommerce Product Thumbnails In The Cart on Desktop and Mobile

For some reason WooCommerce has decided the default styles for the cart thumbnails should be very tiny or completely gone all together.  This leaves you with just text in the cart, which isn’t always what you want. To show the images, you can add some CSS to your WP settings or theme CSS file to always show the product images in cart.

example image source: 
https://MPFusa.org/custom-face-masks/

While I’m sure (re: hope) they have great data to back up the removal of images in the cart, some products need to be seen the full way through for a customer to feel good about what they have in their cart being the right stuff. If you agree, then this code snippet is for you. (copy/paste)

CSS Code:

/** MyStyle: Show thumbnail in cart larger than default 32px **/
.woocommerce-cart table.cart img {
width: auto;
min-width: 32px;
max-width: 100px;
}
@media(max-width:768px) {
/** Show thumbnail row in cart on mobile **/
.woocommerce-page table.cart .product-thumbnail {
display: inline-block !important;
}
/** hide colon above thumbnail for mobile **/
.woocommerce-page table.cart .product-thumbnail:before {
display: none;
}
}

How to Apply This Code

  1. Log into your WP Admin
  2. Go to the Theme Customizer > Added CSS (or similar place where your theme or system lets you put some custom CSS)
  3. Paste the code above & Publish
  4. Clear/Purge your site cache, if you have one

Conversion 101:
Custom Products Should Always Have a Thumbnail in the Cart

This is especially true with custom products, where you may have a few custom designs in your cart with the same product title, and the only recognizable difference is what each design looks like. For this reason, almost every MyStyle enabled site should override the default WooCommerce or theme CSS to show the thumbnail of the user’s creations in the shopping cart. You can do this very easily with a quick CSS tweak.