Category Archives: User Experience

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.

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

While I’m sure (re: hope) they have great data to back this up, 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.

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.

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

Feature Upgrade: Background Libraries Category Browser

The backgrounds browser is Step 1 in almost all MyStyle apps for good reason. It’s an easy step that anyone can do and doesn’t require any content from the user, only choices. It’s fun and shows what you can do quickly and provides instant gratification to users by giving them great colors and stock backgrounds to choose from to get them on their way to creating an awesome design that they love.

The Issue with Long Lists and Pagination

The only problem is, sometimes digging through that backgrounds library seemed daunting and unorganized, and naturally the images at the very end of the list didn’t get very much action (very few people press previous page first to go through the list in reverse order, almost everyone just goes page 1, 2, 3 etc). So this UX needed to be updated to make it easier to find the content you love in the BG library.  Well, that’s where the Category browser comes in.

Enter the Library Category Browser

We’ve launched a new and improved component recently that is already proving to give users more control to get design they love.  Now in step 1 when you browse backgrounds, you’re greeted with a scrolling single page list of thumbnails that represent each category, and are labeled as such to make it easy to understand what each category tile is a collection of.  Now, a customer can see “Fine Art” for example without ever having to click to a next page, and they can click that to see our collection of great fine art images without having to dig through a whole list to find them.  This is way easier and more fun, and immediately makes it so much faster to create a design you already start to like in the first step.

Live and Doing Great!

This feature automatically updates in your app so you should already have it live on your own MyStyle enabled sites if you have a Step 1 for backgrounds (it’s the default, so you probably do).

Stats Show Increased Performance

We’ve already seen an increase in the amount of designs and purchases that make use of background assets that we do not normally see many sales on.  This is the proof that the new feature is getting used on designs that make it all the way through to sale, and that customers are happier than ever using MyStyle to personalize their designs with our collections of free graphics.

That’s great news for everyone using MyStyle!

WordPress Plugin v3.9.0+ Mobile Viewport Improvements and DIVI Tweaks

Plugin Update:

We’ve corrected some issues view and mobile usability in the MyStyle Custom Product Designer plugin for WordPress/WooCommerce. This was an issue that some devices have had with the app not fitting the page well, sticking off the page to the right on small screens. We’ve also added a few more tweaks and tunes to make usability a little more natural for mobile. If you update to the most recent version of our core plugin (any version 3.9.0 or above), you will get the new updates that fix these issues for smart, responsive page auto-adjustments.

Viewport Zooming for Mobile Devices: Better Than Just “Responsive”

Responsive was always supported with the app, and the viewport zooming too to some extent, but it was limited and had some problems with some screen sizes.  In many cases, the theme often can leave the page unfitted for the app.   The viewport now automatically adjusts much better so that the design app can fit in portrait mode to the screen without any pinching or zooming.  Essentially, we’re doing the perfect pinch-zoom for the user, so that they don’t have to, and locking it in there.  We update this on page resize events so that if the user turns the phone or tablet sideways, it re-calibrates the zoom, in addition to switching modes from Portrait (buttons on bottom) vs Landscape (buttons on top/left).  This should help most sites automatically leave enough room for dragging on the handlebars on the sides as well.

Disabling Viewport Rewriting for the Customize Page

You can disable the viewport zooming in the MyStyle settings, if your theme or your custom code already takes care of this.  Just be sure to allow a minimum app width of 550px to allow for the application plus draggable side handle space.

Full Screen Button Moved Up to Top

Full screen, the app really works best. The full screen button, however, was beneath the app where it might go unnoticed. So, we’ve moved the button to the top of the page to make it quicker to see right away before getting down into the app on page by scrolling. This should encourage a lot more users to go full screen, where scrolling is eliminated entirely.

Scroll Handlebars

We’ve added some subtle handlebars to the left and right of the app for users to be able to scroll easier if they’re on a smaller size screen, since the main design area touch-and-drag will move the design elements rather than the page.

Adjustments for DIVI

DIVI is a popular theme for wordpress that uses an 80% page width.  We’ve overridden this now to allow the app to use more of page size by reducing their default margins and page size just on the Customizer page itself.

 

Print Image Renderer Now Offers Eye-Saving Dark Theme

If you utilize the MyStyle Print File Renderer with your production process, then at least one person on that team will appreciate this! We’ve released a new Dark Theme that can be chosen from the new minimized menu (three dots …). Once you choose this theme, it will fade the screen to dark greys instead of light greys.

Choose the Dark Theme from the menu and it will save your preference in your browser. Any time you use that browser it will automatically reload the theme. Click the same option again to turn it off and go back to the standard light theme.  Now that I’ve been using it for about a month in beta I can’t even go back to the light theme at all!  It’s soothing to use the theme.

I can also see why Adobe adopted a similar look in Photoshop as the dark neutral look allows for the print images themselves to really breathe and pop even in the darker ranges.

So, this can be a great eye saver (and battery saver) especially at night when darker UIs help reduce eye strain.  And, it looks pretty cool, too. Have a look:

dark theme print file renderer 2

If you  or your staff use the Print Renderer then enjoy the Dark Theme, your eyes will thank you!

If you don’t see it yet, clear your cache and refresh :)

Major Mobile Device Responsive Improvements

Last week we rolled out some major improvements to the MyStyle Custom Product Designer WordPress Pluin in ways that help the app the page of more WordPress themes without needing to edit or override your theme.

WP Theme Margins and Paddings and Viewports 

Previously, many themes margins and paddings and own approaches to handling the page responsively for all device sizes was having some issues with our iframe.  This meant that on some phones, especially smaller and older ones, the page would not “collapse” down elegantly to allow for the app to fit, and would not adjust viewport correctly to accommodate a PWA like the MyStyle HTML5 Customizer.

Major Responsive Updates in 3.2.X+

We’re happy to say that now, if you update your plugin to version 3.2.0 or higher, you will get a new option in your settings that should be ON by default, to override your theme’s viewport tag, and fit the page to the device better to accommodate the customizer app’s iframe on page. This allows the page to fit to the app more naturally in both portrait (upright) and landscape (sideways) hand-held orientations.  As always, just press “update” in your plugin list for the MyStyle plugin and it will self-update.  Then, visit your settings to ensure the setting for overriding viewport is enabled, which it should be by default.

Improved Portrait Mode

In portrait mode, you’ll notice the app buttons dock to the bottom of the window, much like popular apps do, such as Instagram, making it very familiar to the user and also much more in-reach of the thumb.

UI Zoom Fix for Retina Displays and HD Displays

This now works especially well for some devices when using Full Screen Mode, as we’ve corrected a zoom-level issue for both regular and retina displays that will compensate accordingly to make finger sized buttons where before tiny buttons would sometimes show on high-resolution devices.

Full Screen Mode

There is also a full screen mode button now on the page beneath the app window, that will snap the app to the top, left, right, and bottom edges of the screen automatically, for an even better experience. In this mode, the full-screen can be canceled by pressing the “x” that appears in the top right corner, as with most software.

Just WORKS Out of the Box!  Yes, That Means No More CSS Hackery.

This should help many WordPress / WooCommerce plugin users to integrate with their theme without having to do any custom CSS coding or adjustments, and make it much easier for a user to use the app on handheld devices without the theme causing it to go off-page, or not fit the screen well in general. All-in-all this should have a positive effect on sales ratios for any site that has a majority of users on mobile devices, which has by 2018, really become the norm.

If your particular theme still has any responsive issues, please let us know ASAP so we can push an update to accommodate your theme’s non-standard layouts or viewport scripts.

Happy Customizing!

Update v 2.1.0 for MyStyle Custom Product Designer for WordPress WooCommerce

We’ve recently released version 2.1.0 of the MyStyle Custom Product Designer plugin for WordPress / WooCommerce. This is a non-critical update that addresses the following features or points:

Feature Updates

  • The main product link for customized cart items now goes to the regular product page (it was previously going to the design profile page).
  • Added a system for theming the output of the plugin.
  • Added a theme-able template file for the output of the cart item thumbnail for customized products.

Update Easily in Seconds from your WP Admin

Update by pressing “update” on the main MyStyle Custom Product Desginer plugin in your WordPress plugins list.