add

WP Tavern
WordPress 5.2 Will Add 13 New Icons to the Dashicon Library – WordPress Tavern
Admin Posted On April 19, 2019

WordPress 5.2 Will Add 13 New Icons to the Dashicon Library – WordPress Tavern

Dashicons, the WordPress admin icon font, will be getting its first update in three years when WordPress 5.2 ships. The library will be updated to use WOFF2 (Web Open Font Format 2), replacing the previous WOFF 1.0 format for improved compression. WOFF 1.0 will still be included in core to maintain backwards compatibility.

In addition to the new font file format, Dashicons is adding 13 new icons to the library and CSS declarations for 18 icons that were previously unavailable. The additions span a range of categories, including Buddicons, Core Teams, sites, menus, social, and miscellaneous.

Nate Allen, a Senior Web Engineer at 10up, is a new contributor to the Dashicons library, even though he is not a designer.

“WordPress has had a ‘businessman’ dashicon for as long as I can remember, but didn’t have a female or gender neutral version – until now!” Allen said.

“Previously I worked for Firefly Partners, an agency that builds WordPress sites for nonprofits. I was working on a project for a woman’s rights organization that needed a ‘staff’ post type. It was a little awkward explaining to them that there was a ‘businessman’ icon we could use for free, or they could pay extra to have a custom ‘businesswoman’ icon designed. Not a great look for WordPress.”

Allen submitted a GitHub issue, to see if someone would be willing to create a “businesswoman” and “businessperson” icon, but nobody had the time. Dashicons is maintained by a volunteer team and it can take a long time to get new icons designed.

“About 5-6 months later I learned how to use Illustrator to create vector icons and submitted the icons myself,” Allen said. He submitted the PR and the new icons he created will be included in the next release of WordPress.

These business people icons are useful for projects that include creating things like custom post types for bios, testimonials, team members, and job postings. WordPress 5.2’s updates to Dashicons make the library more inclusive and useful for more diverse projects.



Credited Source


Continue Reading
0
4 Views
0

WPMU Dev
Default WordPress Image Sizes and How to add Custom Sizes
Admin Posted On April 11, 2019

Screenshot of WordPress Media settings

When you upload an image, WordPress does a lot of work behind-the-scenes so you can serve the image to your visitors. You can piggyback on this process and add custom image sizes to save yourself from having to resize images manually.

In this post, I’ll explain how and why WordPress creates different image sizes. Then I’ll teach you how to add your own image sizes by modifying the functions.php file, regenerate thumbnails and add your new image sizes to the Gutenberg image block and/or the WordPress loop.

WordPress Image Sizes Explained

Every time you upload an image into the WordPress media library, these are the additional image size options WordPress creates by default:

  • Thumbnail
  • Medium
  • Medium Large
  • Large

If your theme specifies additional image sizes, WordPress creates those as well.

WordPress also preserves the original size you upload and names it Full as in full-size.

You can see all of these (with the exception of Medium_Large) in the Gutenberg image block Image Size drop down when inserting an image into a page or post.

Why does WordPress create so many images?

Images are like pants. You want to make sure you get the right size. Pants and images that are too small look silly and it’s painfully obvious to you and everyone else that they don’t fit right. Too small images on your site will look stretched out or pixellated.

By contrast, if they’re too large, that’s super wasteful. You wouldn’t put a pair of pants made for a man on a baby, right? It’s so much extra fabric that isn’t even necessary. That baby is going to get lost in a pant leg 😉

Images are the same. If your image is too large for the container, you’re wasting bandwidth and time downloading it to serve on your page. And for what? For nothing.

Ideally, the full-size images you upload should be big enough to fit the largest image container on your site, but no larger. Then when you use images on your site, you should use the exact size image you need.

Since scaling images to create the right size in Photoshop or other image editor takes valuable time, WordPress takes on this task and does it for you. Thanks, WordPress!

All you need to do is choose the appropriate size when inserting an image into your site to get the performance benefits of using an image that is just right.

If the WordPress default image sizes aren’t perfectly sized for your theme, you can adjust the defaults in the Media > Settings section or add custom sizes so you’ll have more options to choose from.

Screenshot of WordPress Media settings
The WordPress default image sizes, except for medium_large which is hidden by default

The default image sizes are as follows:

  • 150px square for thumbnails
  • 300px width for medium images
  • 768px max width for medium_large images
  • 1024px max width for large images.

Medium_large was added to take advantage of responsive image support, which is why it isn’t included in the settings page. Speaking of responsive images…

Responsive Images

All of these images in various sizes serve another purpose, so you shouldn’t set the defaults to zero to keep WordPress from creating them, as some tutorials suggest.

WordPress added responsive images to core in version 4.4. Instead of populating image src attributes with the URL for just one image, WordPress also added srcset (set of sources) which is a list of URLs of images of various sizes.

Guess what images it uses to create that list? Yup, WordPress uses the same images at different sizes it creates when you upload an image.

It offers this list to the browser so it can select an image that is appropriate for the visitor’s device. If the visitor is using a mobile device, they’ll receive a smaller image in the srcset. If they’re visiting your site on a desktop Retina device, then they’ll receive the full-size Retina-ready image file you uploaded. Again, this is why you should upload an image big enough to fill that need.

When you add a custom image size, WordPress will add it to the srcset as long as it has the same aspect ratio. If the custom image size crops the image into a different shape then it will be omitted from the set.

WordPress Thumbnails and Featured Image Size

We’ve now reached the part of our tutorial where we will unravel the whole thumbnail/featured image mess. Basically, the problem boils down to this; because WordPress maintains backward compatibility as it evolves, the names of things change, but the functions still refer to things by their old names.

The WordPress Thumbnails image size was introduced in version 2.9 but was quickly changed to Featured Images in version 3.0, but alas, the name stuck. So you’ll often hear featured images referred to as thumbnails in tutorials and even in the function names.

Screenshot of Featured Image Metabox
If you don’t have the featured image meta box, paste add_theme_support( ‘post-thumbnails’ ); into your functions.php file

Here are some examples:

  • If your theme doesn’t have featured images and you want to enable that feature, you’ll add add_theme_support( 'post-thumbnails' ); to your functions file.
  • To display the WordPress featured image size in a theme, you’ll use the_post_thumbnail() function.

Thumbnails and featured images share a default size of 150px by 150px. If you use the_post_thumbnail() function without an argument to specify the size, it will use the default 150px square size.

To make this less confusing for yourself so you can actually use the right size, I suggest creating a custom image size and naming it featured-large or something similar. Then, when you want to use that image in you’re the loop, you’ll use the_post_thumbnail('featured-large').

Before You Start Creating Custom Image Sizes in WordPress

As you start creating custom image sizes, avoid going overboard and creating images for every conceivable purpose. Otherwise, you’ll burn through space on your hosting and if you’re using an image optimization service that charges you per image, you’re going to go through your image allowance a whole lot faster.

If your plan allows you to optimize 100 images but every upload generates 9 additional sizes that also need to be optimized, you’ll hit your limit once you upload 10 images. Keep this in mind when adding custom sizes and choosing image optimization plans.

Smush Pro doesn’t have image optimization limits and comes with a CDN so you can keep your server storage space clear. You’ll be able to add more custom image sizes than you normally would. Think of it as the equivalent of putting flowy MC Hammer pants instead of little skinny jeans on those babies because the fabric is cheap 🙂

Try Smush Pro free for 30 days.

How to Add Custom Image Sizes in WordPress

Here is the code we’re going to be adding to our functions file to add image sizes:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

This function accepts 4 parameters in this order:

  1. The name you give your custom image size
  2. The image width in pixels
  3. The image height in pixels
  4. Should the image be cropped to fit the width and height you specified above

Cropping

The cropping parameter is a boolean, so you’ll use true or false. If you leave it out entirely, then it will default to false.

If you set the cropping parameter to true, then WordPress will crop your image to fit the dimensions you specify when it creates the custom image.

For example, if your custom image size is a 600px by 600px square and you set cropping to true, then if you upload a 600px by 800px rectangular image, 200px will get chopped off to make the image square.

add_image_size( 'custom-image-square', 600, 600, true );

Setting the cropping parameter to true is helpful for image sizes that have to be exact, like featured images or post archive images that have to fit a certain dimension perfectly.

For images that can have more wiggle room, such as the WordPress post image size and images on pages that tend to have variable heights and widths, then you can set cropping to false. This will resize the images, but it won’t change the shape of the image or cut off any pixels.

Take a look at our image SEO guide if you’re trying to drive traffic to your sites with your images.

Regenerating Thumbnails

One of the most important steps when either:

  1. modifying the WordPress default image sizes
  2. adding custom image sizes or
  3. switching over to a new theme that has different custom sizes

is regenerating thumbnails.

In this context, thumbnails refers to all the additional images WordPress creates, including the custom image sizes that are included in your theme and the ones that you create via your functions file.

When you make a change to the way that WordPress creates additional images, then it will only affect the images you upload going forward. It doesn’t update the images that are already in your media library.

To change the images you’ve already uploaded, you’ll have to use the popular Regenerate Thumbnails plugin.

After you install it, you’ll find it in the Tools section.

Screenshot regenerate thumbnails settings
Just push the button to create new image sizes

When you regenerate your thumbnails in your new sizes, you’ll have the option to delete old unused image sizes to free up server space.

How to Add Custom Image Sizes to the drop-down in the Gutenberg image block

You only need to add the code below to your functions file if you want your custom image sizes to appear in the drop-down in the Gutenberg image block. If you created a custom image size to use behind-the-scenes for your theme, you can skip this step.

Screenshot Gutenberg Image Block Sizes Dropdown
Here’s the custom image size I’m adding with the code below

We’re going to be hooking onto the image_size_names_choose filter.

In the array, I’ll add the name of the custom size that I specified in the add_image_size function and the name that I want to appear in the drop-down within the parentheses.

As I learned when doing this tutorial, you’ll have to regenerate thumbnails before the image appears in the drop down.

WordPress Add Image Size Full Code Snippet

Next, we’ll combine everything we learned into one code block with a real-world example.

Let’s say you want to add custom image sizes to your blog.

Here are the image sizes you want to add:

  • A 1600px by 400px featured image
  • An 800px size that spans the width of your blog’s content section

Since our theme doesn’t currently support featured images, we’ll start with that.

You’ll then see my custom sizes. Notice that I didn’t crop the images that are going to span the width of the blog content. I will hard crop my featured images since I want them to line up just right.

The only image I want to add to the Gutenberg drop down is the blog image since I’ll be using the WordPress featured image size in my theme.

After I add this code to my functions.php file, the next step is to regenerate thumbnails.

To use my custom featured image for my posts in the loop, I’ll add the following to single.php or index.php

See how I added 'featured-large' in the_post_thumbnail() function? That will display my featured image below my blog posts titles, above my content.

Custom Image Sizes Best Practices

Here are a few more tips so you don’t run into trouble creating custom images in WordPress.

  1. Always upload the largest file you can. If your image size is too small, WordPress won’t be able to create all the sizes it needs to serve your images properly on a variety of devices.
  2. If you need to resize the medium_large default size, use the update_option() function. You can use this same function to update any other WordPress default image size.
  3. If you’re outside the WordPress loop, you can use the function get_the_post_thumbnail() to use one of your custom images.
  4. Here’s more on soft cropping and hard cropping when creating custom images sizes in case you run into trouble.

That’s All There is to Adding Custom Image Sizes

Once you understand how custom image sizes in WordPress work, you can modify them to fit your needs and save a lot of time. Getting your image sizes right also helps you improve your site performance and search engine rankings, so it is an important thing to get right.

If you really want to take your image optimization to another level, check out Smush. We’ve added an amazing CDN to Smush Pro that has automatic image resizing, which will help you avoid dealing with modifying your functions file to add custom image sizes.

There are also other great image optimization features that come built-in, like lazy loading and converting images to next-gen formats. Try Smush Pro free for 30 days and see how the image optimization features can improve your site.



Credited Source


Continue Reading
0
8 Views
0

WP Beginner
How to Add Google Maps Store Locator in WordPress
Admin Posted On April 8, 2019

How to add a Google Maps store locator in WordPress

Do you want to add Google Maps store locator in WordPress? A store locator is a map pointing to your business location.

It allows users to locate you on the map, find driving directions, or share the location with friends. Adding a store locator to your business website or even an online store helps you instantly earn user trust.

In this article, we will show you how to easily add Google Maps store locator in WordPress.

Google Maps introduced a paid API to display maps on websites. They still offer a limited free option to embed Google maps on small websites.

Most Google Maps plugins for WordPress use the Google API to retrieve and display maps. If you want to use a Google Maps plugin, then you will need to sign up with Google API platform and enable billing option.

It is a pay as you go service, which means you will be charged based on the number of API calls made from your website.

We will show you both free and paid methods with their pros and cons, then you can choose the one that best suits your needs.

Method 1. Adding Google Maps to Your Website for Free

This method is easier and free. The disadvantage is that you cannot show multiple stores on a single map.

It is recommended for users who just want to add a single Google Maps store location on their website.

First, you need to visit the Google Maps website on your computer. Next, enter your store’s address in the search field and Google Maps will show it on the map with a pinned marker on the map.

Sharing a map in Google Maps

Make sure that the marker is placed on the correct location. You can select a zoom level by clicking the zoom button. Once you are satisfied with the zoom level, you need to click on the share button from the left column.

This will bring up a popup where you need to switch to the ‘Embed a Map’ tab. You will now see your searched location on the map with an HTML code.

Copy the Google Maps embed code

Click on the Copy HTML link to get the embed code.

Now head over to the admin area of your WordPress website. Once in the admin area, go ahead and edit the post or page where you want to display the store location map.

Normally, users add a store location map on their contact form page with their phone number and opening hours.

On the post edit screen, you need to add a custom HTML block.

Adding a custom HTML block in WordPress

In the text area of custom HTML block, you need to paste the code you copied from Google Maps.

Maps embed code in WordPress

You can now switch to the preview tab to see Google Maps embedded into your page. It will show your store location marked on the map with links to directions or to save the location.

Store location marked on the map

Method 2. Add Google Maps Store Locator Using a WordPress Plugin

This method is recommended for users who want to show multiple store locations on a Google Map.

The first thing you need to do is in install and activate the WP Store Locator plugin. For more details, see our step by step guide on how to install a WordPress plugin.

It is a free Google Maps plugin that allows you to create a custom map with multiple store locations and custom fields.

The disadvantage of this method is that it requires you to add an API key. You will need to provide your billing information to use the API key. For pricing and other information, please check out the Google Maps Platform website.

Ready, let’s get started.

Step 1. Generating Google Maps API keys

To use WP Store Locator plugin, you will need to generate two API keys. The first one is called the Browser API key and the second one is called the Server Key.

Let’s start with the Browser key first. Click on this Google Developer Console link and it will take you to the Google API website with all the required APIs enabled.

Create a new project

You need to create a new project and give it a name that helps you identify the project. After that, you will have to wait a few moments as the console creates the project for you.

Next, you will be redirected to the API key configuration page. You need to provide a title for your API key, so you can easily identify it as the browser api key for your Google Maps project.

Browser api key settings

Next, you need to set ‘Application Restrictions’ to ‘HTTP Referrers’. Below that you need to set the ‘Accept requests from’ field to your domain name in the following format.

https://example.com/*
https://*.example.com/* (if you are using a subdomain)

Finally, click on the ‘Create’ button. The console will now save your settings and will show you the Browser key. You need to copy and paste this key in a text editor, you will need it later.

Copy browser api key

Next, you need to create the server API key. Click on this Google Developer Console link and it will take you directly to the console with selected APIs enabled.

You will once again see the create project page. However since you have already created a project, you can just click on the drop-down menu and select your project.

Select your Google Maps project

You will be then redirected to API configuration page. Provide a name for this API key that helps you recognize it as Server key.

Set IP restrictions

Under the ‘Application restrictions’ section, you need to select IP Addresses. Basically, we are telling Google to only accept server requests coming from specific IP addresses.

Now you would need to ask your WordPress hosting provider to tell you the IP range used by your hosting account. It would be in the following format:

172.16.0.0/12

After that, you need to click on the ‘Create’ button to save your settings and copy the Server API key.

Step 2. Setting up the WP Store Locator Plugin

Once you have created your API keys, you need to head over to Store Locator » Settings page to set up the plugin.

Enter Google Maps Keys

Enter the Google Maps browser and server API keys you generated earlier. Next, select Maps language and region and then click on the save changes button to store your settings.

Now, you need to scroll down on the settings page to the ‘Map’ section and enter a start point of the map. This start point could be a city or a country, so users can see markers placed at different locations.

Add a start point for your store locator map

There are many other options on the settings page including map style, default zoom level, map type, search radius, country, etc. You can review them and adjust them to your needs.

Once you are done, it is time to add locations.

Step 3. Adding store locations

Head over to Store Locator » New Store page to add your first location. The New Store page will look just like the default post or page editor in WordPress.

Store address

Provide a title for your store and then scroll down to ‘Store details’ section. From here, you need to enter your store address.

You will see a map in the right column, however it will not automatically update to the address you have entered. You will need to click on the Publish button to save your location. After that, refresh the page and the map will point to the address you provided.

Now repeat the process to add other store locations. You can add as many store locations as you want.

Step 4. Adding the store locator map in WordPress

To display your store locator on a WordPress page, simply create a new page or edit an existing one where you want to display the map.

On the post edit screen, you need to add the ‘Shortcode’ block to your post edit area. After that add the [wpls] shortcode inside it.

Store locator shortcode

You can now save or publish your page and click on the preview button to see Google Maps store locator in action.

Store locator map preview

It will show your map markers for each store location and start the map from your preferred starting point. For example, in this map, it is focused on the city of West Palm Beach and showing two store locations on the map.

That’s all we hope this article helped you learn how to add Google Maps store locator in WordPress. You may also want to see our list of free Google Tools every site owner should use.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Google Maps Store Locator in WordPress appeared first on WPBeginner.



Credited Source


Continue Reading
0
0

WP Tavern
WooCommerce 3.6 to Add Marketplace Suggestions, Despite Overwhelmingly Negative Feedback from Developer Community – WordPress Tavern
Admin Posted On April 5, 2019

WooCommerce 3.6 to Add Marketplace Suggestions, Despite Overwhelmingly Negative Feedback from Developer Community – WordPress Tavern

In one of the most unpopular changes in the history of the WooCommerce open source project, version 3.6 will introduce “Marketplace Suggestions.” The update adds suggestions to the products admin screen, which vary based on whether it’s an empty state or within the list of products.

“They are contextual mentions of official extensions that may be relevant to a customer,” Todd Wilkens, Head of WooCommerce, said. “This currently includes all extensions on the official WooCommerce marketplace, which is open for submissions and lists extensions written by Automattic as well as by trusted partners and third-party developers.”

The suggestions are on by default for users who can install and activate plugins. They are dismissible, but the frequency with which they will be shown is one of the most contentious aspects of WooCommerce’s proposed implementation:

  • We’ll only show 1 on the Products screen, and 5 on the Product – empty state, Orders – empty state or Edit Product metabox.
  • Each suggestion is dismissible, we are not providing an option to dismiss all suggestions (other than if you choose to hide them).
  • We’re only showing 1 suggestion at a time, if a customer dismisses this, they won’t see another one for 24-hours.
  • If suggestions are dismissed more than five times. No further suggestions are shown in that location ( i.e. Products Listing ) for a month.

WooCommerce is providing a filter to turn off the suggestions, and this will likely soon be available as a plugin from the community. It is not something that is easy for non-technical store owners to implement.

add_filter( ‘woocommerce_allow_marketplace_suggestions’, ‘__return_false’ );

“If the above removal-by-script option proves to be difficult to implement – for example, for those who are not comfortable adding custom code – we will explore introducing a simpler way to turn them off and include this in a point release (e.g. a toggle in core settings),” Wilkens said.

WooCommerce Developer Community Sees Marketplace Suggestions as a Major Disruption to Store Owners’ Workflow

The feedback coming in on the announcement post and WooCommerce’s GitHub repository is overwhelmingly negative. In a comment on an issue titled “Rethinking 3.6’s Dashboard Ads,” Josh Kohlbach contends that WooCommerce should limit its marketing to the plugin’s dedicated Extensions screen in the dashboard:

In addition, didn’t anyone think it might be a conflict of interest for WooCommerce the commercial entity to use WooCommerce the open source plugin to show ads in this manner? Bit anti-competitive to all the 3rd party devs out there (of which there are a lot).

WooCommerce already has an amazing page under WooCommerce->Extensions with full searching capabilities etc. Why would you want to show irrelevant ads during a user’s everyday workflow?! Store owners use these screen daily, it’s terrible UX.

I suggest that it gets ripped out in its entirety and filed under “cool implementation/fun to code but horrible idea for actual users.

For those who do not stand to benefit from profits from the 400+ extensions on the WooCommerce.com marketplace, the intrusions in the product admins screen seem all the more offensive. Marketplace suggestions have not been well-received by third-party extension developers.

“This is in direct competition to every third-party developer that is not selling on WooCommerce’s marketplace,” Jamie Madden, founder of the WC Vendors Marketplace, said. “I am one of these. This is advertising for your commercial products, no matter how you try and wrap this. You have an extensions page already which is more than enough, but advertising your products every 24 hours is going too far. This is completely unacceptable.”

The general consensus of those participating in the ticket is that injecting ads into product management screens will create a disruption to store managers’ workflow.

“I too am very concerned about this,” digital agency owner Erik Bernskiold said. “I get that WooCommerce want to benefit from their commercial side, too, and there are many ways to do this. But in this case, it feels like this is at a great disregard for the users. Hijacking a product list, order list or a user interface element in this way is a major interruption of the user experience. It’s not the place for an ad.”

Several participants in the discussion have suggested that WooCommerce make it an opt-in toggle in the settings.

“There is only one scenario where I think this feature should stay in place and could be beneficial: If this feature is controlled by an opt-in toggle in WC settings,” Prospress developer Jeremy Pry said. “Otherwise, this whole feature should be removed entirely. Store owners don’t need advertisements in their admin dashboard. In my opinion, leaving this feature in place would be very harmful to the WooCommerce community.”

Marketplace Suggestions Require Dismissal Every Day for 5 Days, Only to Return 1 Month Later

The fact that the suggestions cannot actually be dismissed for good is one issue that developers predict will end up aggravating WooCommerce users.

“Dismissing just to keep hounding the user, that’s not dismissing… that is snoozing,” WordPress developer Patrick Garman said. “Because I told you 5 times that I don’t want to see your ads, that doesn’t mean come back in a month. The average user shouldn’t have to use a filter to make ads go away.”

I would not be surprised if WooCommerce ends up dialing back the frequency of the ads after they are closed, given that nearly all those participating in the conversation consider it unacceptable to require dismissal five days in a row, with the same process repeated every month thereafter. The frequency with which they are displayed is unusually aggressive.

“I don’t think it technically violates the guidelines it’s just obnoxious and makes WooCommerce look like a low rent solution,” Astoundify founder Adam Pickering said. “It seems we are in a midst of a monetization push and they are looking for any where they can add up sells. Apparently doing so gracefully has gone out the window.”

Despite the overwhelmingly negative feedback, WooCommerce appears to be ploughing forward on its plan to ramp up its marketing in the admin. Automattic is a business and it needs to make money with WooCommerce. Most participants in the discussion do not seem opposed to WooCommerce making money with marketplace suggestions but are strongly requesting that they do not inject ads in places where users are working on their own products in the admin.

“There’s nothing necessarily wrong with ya’ll trying to squeeze out some more money from users – so long as it’s done tastefully, and in a way that actually provides value to the user, instead of spamming and hindering them,” @justlevine commented on the GitHub issue.

Based on the WooCommerce developer community’s feedback, many are in agreement that they will only support changes will be respectful to store owners working in the admin. They would prefer WooCommerce focused its efforts on improving the existing Extensions tab, instead of injecting items from the marketplace on other screens. The current implementation of marketplace suggestions needs work, because it is too heavy-handed in displaying ads after users indicate through the UI that they want to dismiss them.

Most participants in the discussion are in favor of letting store owners decide if they want to see ads for extensions on their product admin screens. They would prefer that users opt in through a more transparent way than simply agreeing to terms of service. At the very least, most prefer WooCommerce add a setting that would allow store owners to easily turn marketplace suggestions off. If Automattic wants this new feature to be successful, the company needs to revise the implementation to be something that doesn’t instantly make the majority of the WooCommerce developer community want to turn it off.

Credited Source


Continue Reading
0
18 Views
0

BobWP
How to Add Custom Fields to a WooCommerce Order
Admin Posted On April 4, 2019

How to Add Custom Fields to a WooCommerce Order

Get 20% off at WooCommerce During Our Marathon

Celebrate 48-hours of content.

Use Coupon Code: BobWPmarathon19

Includes bundles; can’t be used with other coupons or on products already on sale; expires April 5, 2019 midnight PST

If you find yourself filling the Order Notes with so much information that it either confuses the customer, or gets lost, or both, this plugin is for you.

The problem with those Order Notes is there isn’t any continuity across your orders or any way to pull out that information through filters or other means. And often that information is important, or else you wouldn’t need to add it there.

The Admin Custom Order Fields extension helps you streamline this for you and your team.

Adding Custom Fields to Your WooCommerce Orders

Once the extension is activated, you will find a spot to create your fields under WooCommerce > Custom Order Fields.

As you can see here, there are three fields to add your own data and several variables when it comes to the Type and Attributes.

An Examples of Using These Custom Fields

The best way to show you how this works is to give you an example.

In-Person Training Sessions

Let’s say you are selling some sales training sessions at your place of business. There are three training sessions, but there is an assortment of instructors and locations that you want the person who purchases to know. But they are not determined until orders have been placed.

The instructors vary from time to time so there is no set list. In this case, I am going to provide the admin with a blank text field and I have selected all attributes so the instructors can also see in various places in the admin panel.

Next, I add radio buttons for both the buildings and the rooms. I am using radio buttons so only one choice can be made as they assign order to them. And I am choosing less attributes for this field.

I am doing the same with rooms that are available.

Once an order has been submitted, the admin can go in and add the necessary information before completing the order.

As the customer, when I go in to look at my order, I can see these additional details that were added.

When I go into my list of orders, I see columns for this added information as well as the ability to filter the order by instructor name.

From this single example, you can see just how flexible it is and the uses you might find for using the Admin Custom Order Fields for WooCommerce extension.

Credited Source


Continue Reading
0
11 Views
0

BobWP
Add More Flexibility to Your WooCommerce Subscriptions
Admin Posted On April 4, 2019


Get 20% off at WooCommerce During Our Marathon

Celebrate 48-hours of content.

Use Coupon Code: BobWPmarathon19

Includes bundles; can’t be used with other coupons or on products already on sale; expires April 5, 2019 midnight PST

Recurring subscriptions on your WooCommerce store: Over the last few years, it’s become one of the most popular ways to run an online store. The more flexibility your store has and the more options you have for your customers, the more successful you will be.

The flexibility of the WooCommerce extension is amazing and the fact that it works with so many other variables of the online store makes it a favorite.

But there are so many other tools out there to take you beyond what the extension itself provides.

Extending WooCommerce Subscriptions

Here are a few posts on our site that introduce you to plugins that bring even more power to your subscription site.

How to Give Customers More Access to Their Subscriptions in WooCommerce

The Toolbox for WooCommerce Subscriptions plugin is a must-have. It offers a range of new actions that give customers more control over their site. These include shipping now and skipping the next shipment. Changing both the next payment date and the payment frequency.

You can edit their existing subscription, add new products to it, and edit product quantities in their subscription as well. You can read the full post here.

How to Customize Your Subscription Renewal Dates on WooCommerce

With the subscription extension, you can select from a list of specific schedules: monthly, weekly, etc. But often there are times when what you need isn’t what is offered. The WooCommerce Subscriptions Schedule plugin gives store owners the ability to set up a specific schedule for any product subscriptions. You can read the full post here.

Let Your WooCommerce Customers Choose Their Own Subscription Price

When it comes to subscriptions for memberships or groups that you may offer teaching or consulting for, there may come a time that you would rather let them choose their price. The Name Your Price extension works seamlessly to give you the ability to use this alternative pricing model. You can read the full post here.

Offer Downloads to Subscribers on Your WooCommerce Store

What if you had some downloads that you wanted to offer to anyone who buys a subscription on your WooCommerce-run site? These could be special offers, something free, or downloads you are already selling on your store.

The WooCommerce Subscription Downloads extension gives you the power to do this. It doesn’t make your downloads only available to subscribers. You are also able to see them as individual products on your online store. You can read the full post here. 

How to Sell Software Licenses with WooCommerce

If you are selling software licenses, you likely will need the Software Add-On so you can mange them and create keys when selling them. Likely, if you do, you will also be offering subscriptions with those licenses. This plugin works perfectly with the Subscription extension. You can read the full post here.

Building a Membership Site with WooCommerce

The Membership extension for WooCommerce is a powerful way to build a membership site on top of your online store. The best feature is the seamless integration it has with both WooCommerce and the Subscription extension.

It’s a great way to give your members special access to your store’s products, as well as products exclusive to them. You can read the full post here.

A lot of WooCommerce plugins and extensions not mentioned here also work seamlessly with the subscription extension. We hope to post about many of them in the future.

You can also read our post on the WooCommerce Subscription extension and listen to the founder of Propress, Brent Shepherd, as he talks more about this plugin and subscriptions on our podcast here.

Credited Source


Continue Reading
0
9 Views
0

BobWP
Add Shipment Tracking to Your WooCommerce Emails and Order Pages
Admin Posted On April 4, 2019

Add Shipment Tracking to Your WooCommerce Emails and Order Pages

Want to give your customers an easy way to track their orders?

The Shipment Tracking extension will add tracking links to the email and the order pages. It’s very simple to set up.

Shipment Tracking on the Order Page

You will find an option on any order page to add a tracking number.

You can choose from a long list of worldwide providers or, if they are not listed, choose the custom provider. If you choose the latter, you will need to manually add the tracking number link you get from the provider.

When you save this, it’s best to do it when you are marking the order as completed. That way the tracking link will be included in the email sent to them.

Once saved, you can easily view it anytime here:

When the order is completed, the information will now be on the email sent to the customer.

This same link and information will be on the customer’s account page as well.

If you are a developer or are comfortable with code, there are several customizations offered in the documentation of this extension.

Start offering your own customers tracking information with the WooCommerce Shipment Tracking extension.

Credited Source


Continue Reading
0
9 Views
0

BobWP
Easily Add a Product Tab in WooCommerce for a Product Question
Admin Posted On April 4, 2019

Easily Add a Product Tab in WooCommerce for a Product Question

Get 20% off at WooCommerce During Our Marathon

Celebrate 48-hours of content.

Use Coupon Code: BobWPmarathon19

Includes bundles; can’t be used with other coupons or on products already on sale; expires April 5, 2019 midnight PST

Customers often have a question about a product. Sure, they can always head over to your contact page. But if you find your products regularly generate questions from customers, make it easier for them to inquire.

We know that additional clicks tend to discourage people from making a purchase. And many times, when they do have a question, they have to bumble through your contact page to find the right place to send it.

The Product Enquiry Form Extension

The Product Enquiry form extensions that does one simple thing and does it well. After installing it, you will find the minimal settings under WooCommerce > Settings > Products > Product Enquiries.

If you want to add ReCaptcha to the form, you can do that here. Also, you can put in a specific email for these questions. It won’t go automatically to the site admin, but instead a person who will be designated to handle them or at least know where best to send them.

You can toggle this on and off for any specific product:

The form will show up in a convenient spot as a tab on your products page:

When the form is submitted, this is what you get. The subject line clearly signifies it as a Product Enquiry, followed by the product, the name and the email of the person, a link to the product and, of course, their message.

Need to More Control and the Ability to Accept Requests for Quotes?

As I said, this does one thing very well. But you may need more features and control. If you are looking for help with product inquiries on your store, as well as giving product custom quotes, you might want to check out this post on our site.

Otherwise, simply head on over to WooCommerce and buy yourself a copy of the Product Enquiry Form extension.

Credited Source


Continue Reading
0
7 Views
0

WP Explorer
How to Add a Call to Action to WordPress
Admin Posted On April 4, 2019

Amazon Prime CTA

A call to action (CTA) is nothing but fancy marketing jargon for a button that motivates the user to take a desirable action, leading them down your set conversion funnel.

Consider this: you must have at least once, in your life, signed up for some or other subscription service (Spotify, Amazon Prime, etc.) or downloaded a free resource (e-book, templates, etc.) from a website in exchange for our personal details.

Amazon Prime CTA

Amazon Prime CTA

Well, a powerful call to action facilitated your “action”. These enthralling little buttons are an indispensable part of a marketer’s utility belt. They can make all the difference between converting a prospect and losing a potential patron.

Why is a CTA so Crucial?

A well-made CTA is an asset for both sides of the coin:

  • For the website: This is your chance to explicitly prompt people who visit your site or read your email newsletter to do something profitable, like making a purchase, downloading a gated e-book, consuming more of your content, or sharing your work on their social media. The CTA encourages the user to interact with your website and can possibly lay the foundations for a fruitful long-term relationship with the new visitor. What’s more, you have the opportunity to get their personal details and gain a precious new lead.
  • For the users: The CTA unambiguously communicates what they should do next after going through your webpage. Without it, they’ll most likely just leave (and forget) your website, accomplishing no specific action useful to them or you. Besides, the button is their ticket to getting something to take away (possibly for free).

It’s a win-win. And yet, nearly 70 percent of small businesses don’t have a single CTA on their website. If you’re reading this, you’re probably a part of this majority. Don’t worry though, we’ve got you covered.

Some Dos and Don’ts

Before we discuss how to add a CTA to your WordPress website, it’s important to keep in mind the following eight guidelines on how to write a compelling CTA.

  1. Actionable: Command the user to take a specific action. Be assertive. Don’t be vague.
  2. Succinct: Never write full sentences inside a button. Use compact phrases not exceeding five words.
  3. Striking: Design the CTA to be the most conspicuous element on your webpage. Use a contrasting color and larger font size. Match the color of the button with your brand logo, the rest of the page being contrasted. Furthermore, subtle animations such as button hovers and design effects like 3D shadowing can make it even more appealing.
  4. Humorous: Being assertive doesn’t mean you can’t be witty. Most users admire clever wordplay, and puns have persuasive powers.
  5. Personal: Give the users an impression that they are in charge. That is, write something on the lines of “Give Me My Free PDF”, with the reverse response (in case it’s a popup) being something like “No, Thanks. I’m a Prodigy”.
  6. Frictionless: Words like “Buy” and “Sign Up” subconsciously insinuate that the user has to make an effort and give something in exchange for the offer. Who wouldn’t be hesitant when directly asked to part with their money or personal details? Best to steer clear and use low-friction alternatives such as “Try” and “Get”.
  7. Urgent: If pertinent, induce a sense of urgency, a fear of missing out (FOMO) in the user’s mind by writing phrases like “Only X Pieces Left” or a countdown timer indicating the offer will expire soon.
  8. Reassuring: Again, if pertinent, make it crystal-clear to the users that they have nothing to lose if they click the button. For instance, they can cancel their subscription anytime or get a full refund if they’re not satisfied with the product. Phrases like “No Credit Card Required” or “Cancel Anytime” can persuade users on the edge to take the plunge.

And that’s it. Adhere to these best practices to craft an absolutely irresistible CTA with an offer they can’t refuse.

Where are CTAs Placed?

CTAs are useful in various places across your website, the popular ones being:

CTA placement t the end of a blog post

At the end of a blog post (Social Media Examiner)

CTA Placement Exit Intent

In exit-intent popups (Omniconvert)

CTA Placement in Sidebar

Within a fixed sidebar (Quick Sprout)

CTA Placement in Content

In the middle of relevant content (Content Marketing Institute)

CTA welcome page

As a welcome page (Quick Sprout)

Moreover, they are especially useful in email marketing newsletters. Newsletters and promotional emails should always end with an attractive call to action, to ask the readers to:

  • Read the latest blog posts
  • Download a free resource
  • Check out a new product catalog
  • Avail the benefit of a limited-time sale or discount
  • And so on

Finally, let’s talk about how to actually add one to your WordPress website.

How to Add a CTA?

If you wish to manually code the CTA with custom CSS, then this article is for you.

However, there is no need to go through all that trouble, unless, of course, you want to. There are some truly great (free and paid) plugins available to fulfill this task.

Below is a compilation of six of the best free (and freemium) plugins, handpicked for your easy reference.

Elementor

Elementor Page Builder Plugin

Primarily meant to be a full-fledged page builder for WordPress, Elementor is a super easy, drag-and-drop plugin that can also be used to add beautiful CTAs to your website.

True, you don’t need an entire page builder to just add a few buttons to your website. But Elementor completely eliminates back-end work by enabling real-time front-end design, which makes it extremely convenient to use. With the pro plan, you have access to CTA widgets that gives you total control over the design of your CTAs.

The end result would be CTAs that are fully responsive and mobile-friendly. Besides, it works well as a way to create a landing page with WordPress too.

Shortcodes Ultimate

Shortcodes Ultimate Plugin

According to WordPress.com, “A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.”

As the name suggests then, Shortcodes Ultimate is a free plugin loaded with shortcodes that let you easily create tabs, buttons, boxes, sliders and carousels, responsive videos and a lot more.

Shortcodes Ultimate CTA Editor

Once installed, the shortcodes generator is available in the WordPress post editor. Use a blend of boxes and buttons to create your custom, responsive CTA.

WPForms

WPForms WordPress Plugin

Your website visitors may want to get in touch with you for a number of reasons, such as to:

  • Request a quote
  • Ask for an opportunity to collaborate
  • Clarify some doubts
  • Just give you a pat on the back

A simple contact form with a few input fields and a “Submit” button will facilitate two-way communication and help improve the overall user experience. It’ll also come in handy when you want your visitors to sign up for your email list.

In comes WPForms.

This is another easy-to-use yet powerful plugin with a simple drag-and-drop interface. It’ll take but a few minutes to put together a good-looking and functioning contact form.

Additionally, it comes pre-loaded with templates for you to choose and customize. And yes, the forms generated are responsive, mobile-friendly, and optimized for search engine crawlers.

It also boasts built-in automatic anti-spam, and you can block bots by adding a CAPTCHA, reCAPTCHA, or Google’s new Invisible reCAPTCHA.

Popup Maker

Popup Maker Plugin

Popups are a necessary evil. They might irritate users, but when timed correctly, they are a blessing for both, webmasters and users.

For example, exit-intent popups can turn one-time visitors into regular ones by prompting them to sign up for your email list in exchange for something valuable, such as a complimentary e-book.

And with a beginner-friendly and highly customizable popup maker like, well, Popup Maker, you can create any number and types of popups ― email opt-ins, notification popups, video lightboxes, and what have you ― in a jiffy.

Furthermore, you can set click triggers, track popup open count, and set a time delay, among other features.

Boxzilla

Boxzilla Plugin

The daddy of CTA plugins, Boxzilla is another popup call-to-action plugin which enables you to build boxes that pop up or slide in and out in accordance with your pre-planned triggers: time on site (or page), exit intent, scroll percentage, number of page views, or a manual click.

These boxes can contain any content format you like.

You can customize the box position on the screen and use it for any CTA, such as a MailChimp sign-up form, social sharing buttons, and so on. The appearance of the box is also fully customizable using an intuitive editor. It is mobile optimized, too.

Simple Side Tab

Simple Side Tab Plugin

Add a global CTA to your website that links to your favorite piece of content by using Simple Side Tab.

It adds a vertical tab to the left or right side of the browser window that you can link to any page. The tab stays put as the user scrolls up or down the page so it’s always visible and ready for action. And it is mobile-friendly too.

It is simple to setup and use. From just one simple “Settings” page, you can set the text for the tab, set your fonts and colors, and link to the destination URL.

OptinMonster

OptinMonster WordPress Optin Forms

We can’t finish a collection of CTA plugins without mentioning OptinMonster. This popular lead generation software offers a variety of features including popups, floating bars, a content locker, coupon wheel, countdown time and more. You can even use it to create a Welcome Mat call-to-action that visitors simply won’t miss.

Plus it’s easy to build and customize your optins/CTAs with the intuitive drag and drop campaign builder, unlimited color options, image backgrounds, MonsterEffects and more. OptinMonster also supports list segmentation, realtime behavior automation, split testing and conversion analytics. So you can know at a glance if you CTA is working.

This completes the list of top WordPress plugins you can use to add a high-converting CTA to your website. And now you know the importance of doing so along with the best practices that go with it. So what are you waiting for? Onward!

Credited Source


Continue Reading
0
0

BobWP
Add a Special Message in a WooCommerce Completed Order Email
Admin Posted On April 4, 2019

Add a Special Message in a WooCommerce Completed Order Email

Get 20% off at WooCommerce During Our Marathon

Celebrate 48-hours of content.

Use Coupon Code: BobWPmarathon19

Includes bundles; can’t be used with other coupons or on products already on sale; expires April 5, 2019 midnight PST

Have you ever needed to add an extra message in the email you send out when a customer has purchased a product or service from your WooCommerce store?

This message could be for all sales, for specific categories, or for products, including single products.

An interesting feature of this redirect plugin for WooCommerce will do just that for you. It also lets you redirect to specific pages or URLs based on a product purchased or a gateway used. And it offers the ability to create these custom messages to be included with the completed order email.

How to Add a Thank-you or Special Message to the End of a Customer Order Email

On the settings page for this plugin, there are a few options for redirection, including the feature that lets you create additional text on a completed order email.

Creating the Rules and Messages

You simply choose whether you want to use a product or a category, search for it and then add the message.

In this example, I am adding a custom thank-you and a link to a video the customer might find useful.

Once the order has been completed, the message is added to the final receipt sent to the customer via email.

This gives you the chance to get as creative as you want. It could be as simple as a special message, a thank-you with a little gift, or even a discount code for a future purchase. It gives you the opportunity to add a little something to leave the customer with after they have ordered and left your site.

You can see everything this plugin can do beyond messaging and redirecting customers to custom pages and URL’s on your site on this post of ours.

Want to Customize the Design of Your Email?

If you would like more control over colors and font size on the emails that go out from your WooCommerce store, check out this post where we show you what the WooCommerce Email Customizer allows you to do.

Credited Source


Continue Reading
0
7 Views
0


- Advertisement -