Themelocation https://www.themelocation.com Mon, 30 Apr 2018 11:43:41 +0000 en-US hourly 1 https://www.themelocation.com/wp-content/uploads/2017/10/cropped-favicon-32x32.png Themelocation https://www.themelocation.com 32 32 Storefront theme tutorial (Tips & Tricks) https://www.themelocation.com/storefront-theme/ https://www.themelocation.com/storefront-theme/#respond Mon, 30 Apr 2018 11:35:54 +0000 https://www.themelocation.com/?p=6209

WooCommerce is one of the most popular e-commerce solutions, as it is integrated with WordPress, the content management system that powers 25% of the internet. As such, plenty of themes that support WooCommerce can be found, both free and premium.

And, as it always happens with WordPress themes, some are of better quality, design, code, security and frequently updated, while some others might not be up to par or break in a future WordPress core, or WooCommerce update.
However, an ideal theme does exist and, what is more, it is completely free to use.

Developed by the WooCommerce core team, Storefront is a robust theme, guaranteed to always work with every next WordPress or WooCommerce update (since it is developed by the nice people of Automattic), it is responsible, tightly integrated with Woo and all the related extensions.

Storefront is based on the Underscores starter theme, making it very easily customisable for a developer, since every line of PHP and CSS code is very well commented and organized. Nevertheless, for the more casual user, it might seem a bit complex to customize and to make it unique and representative for their online store.

In this tutorial, We will share solutions for the most common modifications that will help you personalize your site.

1- Creating a child theme

Before we proceed with this guide, we will create a child theme for our Storefront theme. Child themes are small themes, dependent on their “parent” theme, which can override the stylesheets and custom functions of the parent theme.

This is very important, as, by creating a child theme, we can upgrade Storefront safely, without losing our custom work. To read more about child themes, check the official WordPress documentation.

A very easy way to create a child theme with a couple of clicks is to use a plugin. The Child Theme Configurator plugin can help us with this; simply download and activate the plugina and follow the wizard to create your first child theme.

2- Add a logo to your store

We need to use the Theme Customizer, that you can find on your dashboard under Themes > Customize. Let’s select the “Site Identity” option and upload our logo.

Storefront recommends an image of 470px x 110px size; however you can upload any size you want and choose later whether you want to crop it or leave the original size. After selecting and uploading your logo click: “Publish” and you are done!

3- Customize header size

We will use again the Theme Customizer, this time we will write some CSS in the “Additional CSS” section:

customizer screenshot

Let’s add the following code:

/* Masthead */
#masthead.site-header {
    height: 155px!important;
    margin-bottom:0px
}

/* Mobile CSS for Masthead */
@media only screen and (max-width: 320px) {
    #masthead.site-header {
    height: 80px!important;
    margin-bottom:0px;
}
}

/* Masthead menu */
.storefront-primary-navigation a, .cart-contents a {
    margin:0 0 0 0;
}

.main-navigation ul {
    padding:0 0 10px 4px!important;
}
.main-navigation li {
    height:38px!important;}

/* Mobile CSS for Masthead menu */
@media only screen and (max-width: 320px) {
.main-navigation ul {
    background:#D6DDE4!important;
}
}

/* Header area */
.site-header {
padding-top:0.5em;
}

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
margin-bottom: -45px;
}

Here is the result:

Before:

customizer screenshot

After:

customizer screenshot

4- Remove the search bar from the theme’s header:

While we are on the “Additional CSS” section of the customizer, let us add the code to hide the search bar:

.site-header .widget_product_search {
    display: none;
}

Before:

customizer screenshot

After:
customizer screenshot

5- Create a separate dropdown menu for mobile devices

Storefront is a responsive theme by design; it adjust nicely to all screen sizes and, for small screens, the header menu turns to the familiar “hamburger” and displays our menu list as a dropdown.

However, what if we don’t want to use the same menu items on desktop and mobile devices? Maybe we need to direct our visitors’ attention to specific places in the website and we want them visible above the fold in a small screen.

Thankfully, Storefront and the WordPress Customizer allow us to do just that. Let’s press the back button next to “Additional CSS” (or just select Appearance > Customize from the dashboard) and select the “Menus” option. Here we can create our custom menu and assign it to only small screens by selecting the “Handheld Menu” location:

customizer screenshot

6- Turn off customer reviews

Customer reviews is a standard functionality of WooCommerce and Storefront, of course, has a nice design integration for reviews.

However, customer reviews are not desirable to every kind of site and e-store. To turn them off, we need to navigate to WooCommerce settings and go to the “Products” tab:

woocommerce settings screenshot

Close to the bottom of the page, we can find the “Reviews” section, where we can update our preferences regarding reviews:

woocommerce settings screenshot

7- Remove product categories images from homepage

WooCommerce allows users to add images not only to products, but to product categories as well. Storefront displays these images in the homepage. This might not be the desirable behavior; we might prefer categories to be displayed as text-only.

To do this, we have to add a line in our child theme’s functions.php file. Open this file and simply add towards the end of the file the following line:

remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );

Here is the result:

Before:

homepage screenshot

After:

homepage screenshot

8- Change the header menu color

Changing the header’s background color in Storefront is very easy, as the Customizer allows us to go to Customize > Header and select the color we want.

However, this option colors the background of all the header region, including the logo, search bar and login section. What if we only want to give a different background to the header menu?

Simple. We go once more to Customizer > Additional CSS and add this line:

.storefront-primary-navigation,
.main-navigation ul.menu ul.sub-menu{
    background-color:#f0f0f0;
}

The above example gives the menu a red background color; of course we can change the color code (#f0f0f0) to the color we want.

header menu screenshot

9- Hide primary navigation bar

If for, whichever reason, we do not want a primary navigation on the header, deleting the menu is not enough; Storefront by default displays all the pages as a menu. Always on the Customize > Additional CSS section, we add the following lines:

.storefront-primary-navigation {
  display: none;
}

customizer screenshot

10- Hide products title in the shop page

In some cases, we might not need titles for our product, only an image. Again using the Customize > Additional CSS section, we add this code to hide the titles:

h4.woocommerce-loop-product__title {
    display: none !important;
}

customizer screenshot

11- Remove blank space from the header:

Again in Customize > Additional CSS section:

.site-branding {
   margin-bottom: 0px;
}

customizer screenshot

12- Increase the width of the search bar

We discussed above how to hide the search bar. What if we want to use the search bar, but we need a wider bar? This is again easily done in the Customize > Additional CSS section:

.woocommerce-active .site-header .site-search {
width: 44.739%;
}
#masthead .site-search .widget_product_search input[type="search"] {
width: 700px !important;
}

customizer screenshot

13- Remove space between header and menu:

In Customize > Additional CSS section:

.site-header {
    height: 77px;
}
.col-full {
    top: -84px;
}
@media only screen and (max-width: 640px) {
    .site-header {
        height: auto;
    }
    .col-full {
        top: 0;
    }
}

customizer screenshot

14- Adding extra text to WooCommerce Registration Page

Suppose we want to add a “Thank you”, or promote our email list, or offer discount vouchers for our new registrants. A great option would be to add a message in the registration page.

To achieve this, we need to add a function in our child theme’s functions.php file:

add_action( 'bp_signup_profile_fields', function() {
    // Start editing below.
    ?>
        <p class="notice-check-inbox">
            Please remember to check your emails and confirm registration for a
            <strong>10% discount voucher</strong>!
        </p>
    <?php
    // End editing.       
} );

15- Remove breadcrumbs in Storefront theme

Breadcrumbs (see image below) is a compact navigation on the top of each page that shows the category to which the page, or product in this case, belongs. They are great for search engine optimization, however we might not want to use this functionality.

breadcrums screenshot

To remove breadcrums, we will add a filter in our child theme’s functions.php file:

add_filter( 'woocommerce_get_breadcrumb', '__return_false' );

product page without breadcrums screenshot

16- Change the URL link in the logo

Storefront and WordPress themes in general, link the site’s homepage in the logo, by default. This is standard in user experience, and users expect to be able to go back to the homepage every time they click on the logo.

However, there are occasions that we want a custom link for our logo. For instance, if we use a landing page, product or promotion page and the actual homepage is on a different location.

To change this default behavior, we need to do add the following code in our child theme’s functions.php file:

add_action( 'storefront_header' , 'custom_storefront_header', 1 );
function custom_storefront_header () {
    remove_action( 'storefront_header' , 'storefront_site_branding', 20 );
    add_action( 'storefront_header' , 'custom_site_branding', 20 );
    function custom_site_branding() {
        // HERE set the link of your logo or site title
        $link = home_url( '/my-custom-link/' );
        ?>
        <div class="site-branding">
            <?php
                if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
                    $custom_logo_id = get_theme_mod( 'custom_logo' );
                    if ( $custom_logo_id ) {
                        $custom_logo_attr = array('class' => 'custom-logo', 'itemprop' => 'logo' );
                        $image_alt = get_post_meta( $custom_logo_id, '_wp_attachment_image_alt', true );
                        if ( empty( $image_alt ) ) {
                            $custom_logo_attr['alt'] = get_bloginfo( 'name', 'display' );
                        }
                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
                            esc_url( $link ),
                            wp_get_attachment_image( $custom_logo_id, 'full', false, $custom_logo_attr )
                        );
                    }
                    elseif ( is_customize_preview() ) {
                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>', esc_url( $link ) );
                    }
                    $html = is_front_page() ? '<h1 class="logo">' . $logo . '</h1>' : $logo;
                } elseif ( function_exists( 'jetpack_has_site_logo' ) && jetpack_has_site_logo() ) {
                    $logo    = site_logo()->logo;
                    $logo_id = get_theme_mod( 'custom_logo' );
                    $logo_id = $logo_id ? $logo_id : $logo['id'];
                    $size    = site_logo()->theme_size();
                    $html    = sprintf( '<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">%2$s</a>',
                        esc_url( $link ),
                        wp_get_attachment_image( $logo_id, $size, false, array(
                            'class'     => 'site-logo attachment-' . $size,
                            'data-size' => $size,
                            'itemprop'  => 'logo'
                        ) )
                    );
                    $html = apply_filters( 'jetpack_the_site_logo', $html, $logo, $size );
                } else {
                    $tag = is_front_page() ? 'h1' : 'div';

                    $html = '<' . esc_attr( $tag ) . ' class="beta site-title"><a href="' . esc_url( $link ) . '" rel="home">' . esc_html( get_bloginfo( 'name' ) ) . '</a></' . esc_attr( $tag ) .'>';

                    if ( '' !== get_bloginfo( 'description' ) ) {
                        $html .= '<p class="site-description">' . esc_html( get_bloginfo( 'description', 'display' ) ) . '</p>';
                    }
                }
                echo $html;
            ?>
        </div>
        <?php
    }
}

Our custom URL goes to the line 7: $link = home_url( '/my-custom-link/' );; just replace “my-custom-link” with your actual link

17- Completely remove categories from the store page

Again in our functions.php file, we add the following function:

function storefront_child_reorder_homepage_contant() {
    remove_action('homepage', 'storefront_product_categories', 20 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

Here is the result:

Before:

homepage screenshot

After:

homepage screenshot

18- Remove product image from cart and mini-cart.

In our child theme’s functions.php file, we add the following filter:

add_filter( 'woocommerce_cart_item_thumbnail', '__return_false' );

Here is the result:

cart page screenshot

19- Recent products from our the shop’s page

Storefront, by default, allows us to most recent products that were added to our store in our shop’s front page

homepage screenshot

However, this might clutter the shop page, if we change our products frequently, or if we prefer to display different information. Here is how to remove this feature:

In our child theme’s functions.php file, we add the following function:

function storefront_child_reorder_homepage_contant() {
    remove_action('homepage', 'storefront_recent_products', 30 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

Here is the result:

homepage screenshot

20- Remove best-selling products from store page

Another feature of Storefront that might not be desirable, is to display the best selling products.

homepage screenshot

To disable this feature, in our child theme’s functions.php file, we add the following function:

function storefront_child_reorder_homepage_contant() {
    remove_action('homepage', 'storefront_best_selling_products', 70 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');    

And here is the result after removing the best selling products feature:

homepage screenshot

21- Remove featured products

In the same vain, we might want to disable feature that displays the featured products. We need to add the following function in our child theme’s functions.php file:

function storefront_child_reorder_homepage_contant() {
    remove_action('homepage', 'storefront_featured_products', 40 );
    }
add_action('init', 'storefront_child_reorder_homepage_contant');

Here is the result:

Before:

homepage screenshot

After:

homepage screenshot

22- Integrate a sticky “Add to cart” button

For some products, the description, image gallery, and additional information might result to a long page.

Instead of forcing the customer to scroll back up to the top of the page in order to add the product to cart, we could instead have a sticky “Add to cart” button on the top of the screen.

This is very easily accomplished with the Storefront Sticky Add to Cart plugin. The plugin does not need any configuration, simply install and activate it, and enjoy sticky “Add to cart” buttons on all your product pages.

product page screenshot

23- Add a dropdown list of cities on Checkout page

The following function will allow us to have a dropdown list of cities to your Checkout page. This will help our customers to fill in more quickly their personal data; it can also enable us to only make available the cities to where we ship our products.

This is the function we will add in our child theme’s functions.php file:

add_filter( 'woocommerce_default_address_fields', 'override_checkout_city_fields', 10, 1 );
function override_checkout_city_fields($fields) {
 // Define here in the array your desired cities (Here an example of cities)
    $option_cities = array(
        '' => __( 'Select your city' ),
        'a' => 'a',

    );

    $fields['city']['type'] = 'select';
    $fields['city']['options'] = $option_cities;

    return $fields;
}

In the fifth line of the above code, we define our list of cities. The first part of the code 'a' => is the city’s ID, that cannot include spaces or empty characters, ex. 'london'.

In contrast, on the second part of the code we write the name of the city the exact way we want it displayed, with capitalization, spaces if necessary, etc. Example, => 'London City',. We can add as many elements to the list as we want.

checkout page screenshot

24- Hide the product quantity plus and minus buttons from product page

To hide the text field with the plus and minus buttons to increase or decrease product quantity, all we have to do is to add the following rule in the “Appearance > Customize > Additional CSS” section:

.quantity {
    display: none !important;
}

Here is the result:

customizer screenshot

25- Hide “Add to cart” button on product page

If for any reason we need to hide the “Add to cart” buttons, we simply add the following CSS rule in the “Appearance > Customize > Additional CSS” section:

.single_add_to_cart_button {
    display: none !important;
}

customizer screenshot

26- Remove Storefront theme credit from footer

To remove the Storefront credit in the footer, we need to add the following function in our child theme’s functions.php file:

add_action( 'init', 'custom_remove_footer_credit', 10 );
function custom_remove_footer_credit () {
    remove_action( 'storefront_footer', 'storefront_credit', 20 );
    add_action( 'storefront_footer', 'custom_storefront_credit', 20 );
}
function custom_storefront_credit() {
    ?>
    <div class="site-info">
        &copy; <?php echo get_bloginfo( 'name' ) . ' ' . get_the_date( 'Y' ); ?>
    </div><!-- .site-info -->
    <?php
}

Here is the result:

Before:

footer screenshot

After:

footer screenshot

27- Change storefront widget section color and font size

The Customizer does not give a direct way to change font color or size for the page widgets. Nevertheless, it is very easy to change it to whatever we want, with adding the following CSS rules in the “Appearance > Customize > Additional CSS” section:

.widget-area .widget {
    color: red;
    font-size: 1em;
}

customizer screenshot

28- Show Storefront “Sale” badge on product image

WooCommerce allows us to define a “sales”, or discounted price for certain products. Those products are automatically marked with a “Sale” badge.

Here is how to move the “Sale” badge to be displayed on the product image, rather than on the text description:

In the “Appearance > Customize > Additional CSS” section we add the following rule:

ul.products li.product .onsale {
    position: absolute;
    top: 137px;
    right: 62px;
}

customizer screenshot

29- Change the color of the “Sale” badge

To change the color of the “Sale” badge, let’s add the following rule in our “Appearance > Customize > Additional CSS” section:

.onsale {
    background-color: #FFFFFF;
    border-color: #FF0000;
    color: #FF0000;
}

customizer screenshot

30- Change quantity “plus-minus” box color

Here is a simple CSS rule to change the background color of the quantity plus and minus buttons:

.quantity .qty {
    color: #000;
    background-color: #f5df72;
}

customizer screenshot

31- How to change the background color of the Storefront header

If we need to change the background color of Storefront theme’s header, the WordPress Customizer gives us a very easy way to do this:

We go to “Appearance > Customizer > Header” and we select the color we want in the “Background Color” section

customizer screenshot

32- Change the background color of the minicart on the header

When we follow the above way to change the theme’s header background color, we notice that the minicart dropdown inherits the header’s background color.

This might not be desirable, as the minicart contents might not be readable with the header’s background color.

With the following CSS rule, we can change the minicart background color to anything we want (regardless of the header color):

.woocommerce.widget_shopping_cart {
    background: white;
    border-radius: 12px;
}

customizer screenshot

33- Add Image in Storefront Footer Using CSS Below Copyright?

Inserting images in the storefront footer is crucial if you want to display a small logo, accepted payments, download link, or partner badge below the copyright text.

Steps:

1. Head over to LAYERS → CUSTOMIZE, then, Click on FOOTER.
2. After that, Click on CUSTOMIZATION to expand the panel and click on Select Image in the Background Image option.
3. Select the image you want to use and click USE IMAGE.
4. Then, Select No Repeat and Bottom, which will center your image in the footer text area.
But if you still want to adjust the position of your image manually;
5. Click the back button in the Customizer nav
6. Then, click CSS to expand the panel.
7. After that, enter the following:

.site-info:after {
    content: '';
    background-image: url(https://20k28w1i5xtz152fd42li172-wpengine.netdna-ssl.com/wp-content/uploads/2017/11/Pocket-Squares.jpg);
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

Then, ensure you adjust the percentages of the image as desired, and in line with the copyright text.

]]>
https://www.themelocation.com/storefront-theme/feed/ 0
Notify Admin When New Account is Created WooCommerce Store? https://www.themelocation.com/notify-admin-account-created-woo/ https://www.themelocation.com/notify-admin-account-created-woo/#respond Thu, 26 Apr 2018 12:56:42 +0000 https://www.themelocation.com/?p=6205 One of my clients has been having a hard time, trying to figure out how he could customize his WooCommerce store to notify admin anytime a new account is created in his store.

He wanted to notify admin so he could tag a customer’s account based on the type of purchase they want to make.

The problem here is that this functionality is not built into WooCommerce. So, it’s quite challenging to put customers in the right customer group.

Now,  is it possible to have an email sent to the Admin every time a new customer account is created?

The answer is Yes. It’s possible!

If you have been trying all sorts of email plugins and aren’t making headway with it, here is a simple method that can help you out.

First, Add code to the default WooCommerce customer-new-account.php file. Secondly, you’ll need to add a simple function to the functions.php file.

– To do this, make sure you add in file customer-new-account.php  the following line of code at the end.

php do_action( 'new_customer_registered', $user_login );

After that, add this snippet to functions.php:

add_action( 'woocommerce_created_customer', 'woocommerce_created_customer_admin_notification' );

function woocommerce_created_customer_admin_notification( $customer_id ) {

wp_send_new_user_notifications( $customer_id, 'admin' );

}

When you do this, Your Shop will notify admin every time a new account is created.

That is it. I hope you’ve found this useful.

]]>
https://www.themelocation.com/notify-admin-account-created-woo/feed/ 0
How to Disable WooCommerce Lightbox/Hover zoom ? https://www.themelocation.com/disable-woo-lightbox/ https://www.themelocation.com/disable-woo-lightbox/#respond Wed, 25 Apr 2018 13:04:54 +0000 https://www.themelocation.com/?p=6198 If you’re having troubles removing default WooCommerce LightBox or Image Magnifier, on your product page, don’t worry. I have got the perfect solution for you.

For starters, you will need to paste this snippet into your functions.php file, within the theme folder:

remove_theme_support( 'wc-product-gallery-zoom' );

The function of this code will remove the “image zoom” feature on the single product page.

In case you don’t know, WooCommerce Lightbox is a product feature that lets you open the image gallery with just a click.

This feature comes in handy if you are selling products that your customers would want to have a clear view of the product image.

But you don’t want this feature, and you want it disabled, right?

Not a problem… All you have to do is to add the following code in theme’s functions.php

add_action( 'after_setup_theme', 'remove_wc_gallery_lightbox', 100 );
function remove_wc_gallery_lightbox() {
remove_theme_support( 'wc-product-gallery-lightbox' );
}

And boom! The product image will automatically disable LightBox or Image Magnifier.

Here’s how the page looks like before the code:

And here’s the image after the code:

Pro tip: Make sure you use only the child theme for all customization on your site. This theme will prevent you from losing all the changes in your store after theme update.

So, what’s your experience using this code? Do you have other ways to do it? Let me know in the comments. We’d love to hear from you.

]]>
https://www.themelocation.com/disable-woo-lightbox/feed/ 0
How to Sell Products by Weight WooCommerce? https://www.themelocation.com/sell-products-weight-woocommerce/ https://www.themelocation.com/sell-products-weight-woocommerce/#comments Fri, 02 Mar 2018 12:22:17 +0000 https://www.themelocation.com/?p=6117 You’d agree with me that not all products can be sold according to their quantity. Some products, such as nut butter, water, brine, vinegar, syrups, fruit or vegetable juice and a host of other products are sold according to their weight.

For example, selling a bunch of fruits by weight using price per kilogram, will give buyers the complete freedom to shop in the prices they want. The customer will be able to type in exactly how many grams he wants to buy. This will then dynamically display the price.

I had a client who wanted to sell his “Thin Pork Sausages” on WooCommerce using price per kg, instead of selling the products in quantities. So, the more the weight of the Thin Pork Sausages, the higher the price it would be.

But, this was quite difficult for him because the system (WooCommerce) was built for selling in quantities.

The solution to this, involved a manipulation and complete hack of the system in order to sell certain products by weight.

In this article, we’re going to show you a step by step tutorial on how we did it and how you can also sell your product on WooCommerce price per kg.

Step 1: ​The very first step you want to take is to add the price according to the weight. To do this, head straight to your Dashboard -> Appearance -> Editor -> Theme Function

Step 2: After that, scroll down to the bottom of the code section, which is displayed on your screen and enter the following code:

add_filter( 'woocommerce_get_price_html', 'wb_change_product_html' );
	// Change and return $price_html variable using the $price and weight amount
	function wb_change_product_html( $price ) {
		$price_html = '<span class="amount">' . $price . ' per kg </span>';	// change weight measurement here
	
		return $price_html;
	}
	
	add_filter( 'woocommerce_cart_item_price', 'wb_change_product_price_cart' );
	// Change the cart prices with $price variable and weight amount
	function wb_change_product_price_cart( $price ) {
		$price = $price . ' per kg';	// change weight measurement here
	
		return $price;
	}
	
	add_filter( 'woocommerce_checkout_cart_item_quantity', 'wb_checkout_review', 10, 3 );
	// Change the checkput prices with $cart_item variable and weight amount
	function wb_checkout_review ( $quantity, $cart_item, $cart_item_key ) {
		
		$cart_item = ' <strong class="product-quantity">' . sprintf( '&times; %s', $cart_item['quantity'] ) . ' kg </strong>';	// change weight measurement here
	
		return $cart_item;
	
	}

Step 3: After entering the code, make sure you Update File to save the changes.

After you have updated the file, move straight to your store to see if the prices of the products are now displayed according to their weight in ‘per kg’ just like it’s shown in the picture below.

If all the products display its price in per kg, then congratulations! You can now sell your products by weight in your store.

I believe with this knowledge, you can start selling some of your products per kg in your store instead of selling them according to their quantities. This is the simplest way you can easily add the weight amount to your products on WooCommerce.

I hope you’ve found this post interesting and useful? Let me know if you have any question concerning this tutorial.

]]>
https://www.themelocation.com/sell-products-weight-woocommerce/feed/ 4
How to disable/remove certain payment option from WooCommerce checkout? https://www.themelocation.com/how-to-remove-certain-payment-option-from-checkout-page/ https://www.themelocation.com/how-to-remove-certain-payment-option-from-checkout-page/#respond Tue, 30 Jan 2018 08:04:17 +0000 https://www.themelocation.com/?p=153 If you’re rendering a service or selling integral goods, there are chances you don’t want your customers to use a particular payment method or any payment options at all on your checkout page.

How do you go about this, so it doesn’t force the user to either use a specific method or any payment gateway?

Don’t worry! We are here for you.

We’re going to hold you by the hand and show you a super easy way to not only remove a certain payment method, but to also remove all payment options without breaking your site or pulling your hair off.

First, let take a look at how to change a specific payment method on the checkout page.

How to Change a Specific Payment Method on Checkout Page?

This is how your default checkout screen will look like at first:

wocommerce

In the above screenshot, you can see all the default payment gateways are all intact.

The next step now is to remove a specific payment method. Let’s say we want to remove cheque payment. Yes, cheque payment will be fine. Let’s go with that.

Steps:

  1. The first step is to login to the Back-end of your site. Click the settings link under WooCommerce menu.
  2. Then, head straight to the checkout tab where you’ll see all the payment methods and their settings.
  3. Here’s how it looks like in the screenshots below:

 

wocommerce

4. To remove the check payment method, click on the cheque link. Here you’ll see the checkbox marked as checked. This checkbox will determine whether to enable/disable check payment option.

wocommerce

 

5. Now, Uncheck the cheque payment box and save changes.

wocommerce

  1. After that, go straight to the front end of your site, and refresh the checkout page. The cheque payment method will automatically disappear from your website.

Here’s how your webpage will now look like.

wocommerce

Awesome, right? With this simple method you can easily disable any payment gateway of your choice.

With that out of the way, let’s look out how to disable all payment methods on your checkout page.

How to Remove all Payment Methods?

We’re going to be using a different method here. The way to go is to add just a single line code to the functions.php file within your theme folder.

You can decide to use a plugin called code snippet.

Here’s the code:

Add to Functions.php

<pre>

add_filter( ‘woocommerce_cart_needs_payment’, ‘__return_false’ );

</pre>

And Voila! The checkout page will now display only a “Place Order” button.

Pretty straightforward, right? Yeah, that’s how it is. I hope you have found this article very useful. Let me know if you want any further assistance.

]]>
https://www.themelocation.com/how-to-remove-certain-payment-option-from-checkout-page/feed/ 0
How to display minimum price from multiple variations in WooCommerce? https://www.themelocation.com/how-to-display-minimum-price-from-multiple-variations-in-woocommerce/ https://www.themelocation.com/how-to-display-minimum-price-from-multiple-variations-in-woocommerce/#comments Thu, 25 Jan 2018 07:00:11 +0000 https://www.themelocation.com/?p=71 One of my customers had a product that has multiple variations such as sizes, types, colors, etc. And by default in WooCommerce, variable product displays a range of price from lowest to highest.

But my client wanted the system to show the lowest price among variations.

So, how do we go about this?

Here’s a step by step guide on how we did it and how you can get any variable product to display the lowest price.

First, you have to go ahead and create a variable product with attributes and different variations.

 

woocommerce

woocommerce

After that, save the product.

Now on the front end, you’ll see the price range for the variable product you’ve just created.

On shop page:

woocommerce

And the product page:

woocommerce

The next thing you want to do is to display the minimum price among the variations.

So, how do you do that?

To do this, you want to add the following lines of code at the end of your theme’s functions.php file:

add_filter('woocommerce_variable_price_html', 'custom_variation_price', 10, 2); 

function custom_variation_price( $price, $product ) { 

     $price = '';

     $price .= wc_price($product->get_price()); 

     return $price;
}

You can access functions.php file here:

woocommerce

Please, ensure you save the file. And when you’ve done that, head back to the Front-end. You’ll see the lowest price already displayed.

This is how the shop page is going to look like:

woocommerce

And also check out the product page:

woocommerce

So, that’s it. As you can see, we have successfully hidden the variable product price range, which was displaying £10-£20. We now have a variable product that shows only the lowest price-£10.

You can easily customize your WooCommerce variable product to display the lowest price by following the steps outlined above.

I hope you’ve found this post useful? Let me know if you have any question concerning this tutorial.

]]>
https://www.themelocation.com/how-to-display-minimum-price-from-multiple-variations-in-woocommerce/feed/ 2
How to Hide/remove/disable Add to cart button in WooCommerce ? https://www.themelocation.com/how-to-hideremovedisable-add-to-cart-button-in-woocommerce/ https://www.themelocation.com/how-to-hideremovedisable-add-to-cart-button-in-woocommerce/#comments Fri, 12 Jan 2018 10:24:19 +0000 https://www.themelocation.com/?p=6

Free Plugin to Remove Add To Cart Button: Download at WordPress.org

Today we are going to do a bit of customization in the WooCommerce. Before, moving to the solution I assume that you have installed WordPress and WooCommerce on that successfully.

Now let’s move to the solution. When the problem came to me the first thought in my mind was to edit template files. That could be one approach but not a wise one for such a small customization.

After doing some research, I’ve came to the conclusion that luckily WooCommerce allows multiple hooks, with the help of these hooks, we can remove prices and buttons.

After installing WordPress go to backend and add a product. You can name it as you want and fill the details. See the image below:

Now on the front end you can see add to cart button on product listing i.e. shop page and product detail page as shown in the figures below.

Now we need to remove this button.

So, to remove add to cart button from product detail page and shop page i.e. product listing page all we need to do is to add these two hooks.

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

We can place this code in any place where it should be appropriate.

In some cases, we can add them to functions.php file but in some cases it may generate some error. So, I’m going to place these hooks in woocommerce.php file under the plugins folder.

To access this file go to wordpress > wp-content > plugins > woocommerce and open the file woocommerce.php there and after line 904 place these two hooks.

Save the file then refresh page. Add to cart buttons should have been removed from the site.

Thats it.

How to remove the Add to Cart button from a specific product Only?

There are a couple of ways to do that, depending on the desired result:

1- You could simply empty the price fields. The product will no longer have a price, nor an Add to cart button.
2- You could enable stock management, and set the product stock to zero.
3- You could write a filter for the “woocommerce_is_purchasable” hook, and return false when the product ID is the target one. This would leave the price visible, and display a “product cannot be purchased” note instead of the Add to cart button.

We will achieve the result by going with the Third option that is to add code to the functions.php file of the Child theme.

add_filter('woocommerce_is_purchasable', 'my_woocommerce_is_purchasable', 10, 2);
function my_woocommerce_is_purchasable($is_purchasable, $product) {
        return ($product->id == whatever_mambo_jambo_id_you_want ? false : $is_purchasable);
}
]]>
https://www.themelocation.com/how-to-hideremovedisable-add-to-cart-button-in-woocommerce/feed/ 19
How to Add Custom Field to WooCommerce Checkout Page? https://www.themelocation.com/how-to-add-custom-field-to-woocommerce-checkout-page/ https://www.themelocation.com/how-to-add-custom-field-to-woocommerce-checkout-page/#comments Fri, 05 Jan 2018 07:33:06 +0000 https://www.themelocation.com/?p=134 Online store owners might need custom checkout fields for a variety of reasons. For instance, several retailers might want to provide an option for buyers to purchase an item as a gift for someone else.

In this case, the same retailers might want to provide a variety of gift-wrapping and dedication options which would provide convenience for the gift buyer.

There may also be other applications, such as for a pizza or virtually any other delivery service. A text area can be added where customers can make special requests and instructions or where users can provide directives for deliveries to be made at a specific time and place.

All these and any other useful information under the sun can be communicated by the customers to online store owners using additional fields in the checkout page.

In this tutorial, you will learn how to add extra fields in the WooCommerce checkout page. We will explore and provide the code that you can use as a guide to effectively utilize custom fields to gain additional information from your customers during the checkout process.

To add custom field, We will follow two approaches such as:

  • Plugin
  • Code

1- Custom WooCommerce Checkout Fields Editor

The easiest way to customize your WooCommerce checkout page. See all the existing used fields for the Checkout, Shipping, and Account sections, add new ones, edit them and re-arrange their order.

This plugin is designed with those of you in mind, who want to request more information from your WooCommerce checkout page, give additional options to your customers and do not want to spend a fortune for a custom-coded solution.

  • Create new fields with a few clicks of the mouse

Adding a text field

  • Change the order of the fields at will

Sorting and ordering fields

  • Edit, change field type or deactivate default WooCommerce fields
Features:
  • Create new fields on Checkout, Shipping, and Account sections.
  • Create additional fields that display after Order Notes.
  • Edit, remove or disable fields created with this plugin, or standard WooCommerce fields.
  • Change the “required” status of any field.
  • All fields, even the default WooCommerce ones, are editable with this plugin.
  • Field types:
    • Text
    • Password
    • Hidden
    • Textarea
    • File Upload
    • Select
    • Multi-Select
    • Checkbox
    • Radio Button
    • Date Picker
    • Heading
  • Fields spanning across the full row or half a row.
  • Add custom class to any new or existing field.
  • Choose which fields are displayed in the order email notification.
  • Choose which fields are displayed in the “Order Details” page.
  • Labels and placeholders for fields.
  • Select allowed filetypes for upload fields.
  • Reset all custom fields and fallback to default.
Quick start:

1. Upload and activate the “Custom WooCommerce Checkout Fields Editor” zip file.
Upload plugin
2. Go to WooCommerce > Checkout & Register Form:
Checkout and Register Form
3. Add a custom “Text” field:
Adding a text field
4. Add a custom “Select” field:
Adding a multiple selection field
5. Save changes and re-arrange fields with drag-and-drop:
Sorting and ordering fields
6. Your checkout page with custom fields is ready!

Checkout page before Checkout page after
Standard checkout form Final checkout page
Options:

Custom Field options

Type

Choose the field type.

  • Text: Text input field for any text strings (names, city name, etc).
  • Password: Password input – input characters are masked.
  • Hidden: Adds a hidden field.
  • Textarea: A multiline text area input for longer messages.
  • File Upload: Allows users to upload files.
  • Select: Dropdown options. Requires to set the options with a pipe | separator.
  • Multi-select: Dropdown multiple choice options. Requires to set the options with a pipe | separator.
  • Checkbox: Select multiple options with a checkbox. Requires to set the options with a pipe | separator.
  • Radio Button: Select single option by checking a radio button. Requires to set the options with a pipe | separator.
  • Date picker: Datepicker to select a date.
  • Heading: Add a custom heading to a section.

Name

The unique name of the field.

Label

The label of the field, displayed on the front-end.

Placeholder

A short text shown on the field that disappears when the user begins to type. Usually contains a hint on the expected value of the field.

Class

  1. Row class: Can be one of two values:
    • form-row-wide, if we want the field to span across the full width of the column, or
    • form-row-first or form-row-second, if we want the field to occupy half of the columns width.
  2. Custom class: Add your custom class here for CSS styling.

Misc Options

  1. Required: Toggle this option if you want the field to be mandatory to complete, before the user submits the form.
  2. Clear Row: The row clears after the field is displayed and the next field starts on a new row.
  3. Enabled: Toggle this to make the field visible on the front-end.
  4. Display in Emails: Toggle this to send the field value with the order email.
  5. Display in Order Detail Pages: Toggle this to make the field visible in the order detail page.

2- Custom Code:

To start integrating custom fields, we should make the necessary modifications on the theme functions.php file. The easiest way to do this is by navigating to Appearance > Editor, then looking for Theme Functions (functions.php) on the right-hand side.

/**

* Add the field to the checkout page

*/

add_action( 'woocommerce_after_order_notes', 'tl_some_custom_checkout_field' );

tl_some_custom_checkout_field( $checkout ) {

echo '<div id="some_custom_checkout_field"><h2>' . __('Heading') . '</h2>';

woocommerce_form_field( 'some_field_name', array(

'type'         => 'text',

'class'         => array('my-field-class form-row-wide'),

'label'         => __('Additional Field'),

'placeholder'   => __('Some hint'),

'required'     => true,

), $checkout->get_value( 'some_field_name' ));

echo '</div>';

}

The code above adds a function which generates the code for the additional form field and adds a corresponding action which will call the function after the WooCommerce order notes section. It is worth noting that the code above does not merely include an input element but also a heading element which can serve as a good placeholder for the your new section of custom fields.

As you can see in the screenshot below, adding this code would generate a custom-made form field similar to the rest of your checkout form. The newly-added code generated by the function appears right as expected, after the order notes field.

/**

Enabling validation of additional fields

While the current setup looks okay, it is important that the additional fields work properly just like the rest of the checkout form. For this to happen, further adjustments should be made to the functions.php file.

For instance, the following code below would ensure that the customer would input a valid value for the additional custom fields that we have added. This is to prevent the user from skipping required custom fields which may contain essential information for the order to be processed properly.

* Process the checkout

*/

add_action(‘woocommerce_checkout_process’, ‘tl_some_custom_checkout_field_process’);

tl_some_custom_checkout_field_process() {

// if the field is set, if not then show an error message.

if ( ! $_POST[‘some_field_name’] )

wc_add_notice( __( ‘Please enter value.’ ), ‘error’ );

}

Saving the information to the database

Now that the needed code for the proper validation of input is in place, the last step in adding a custom field to the checkout page is to ensure that the additional information that the users input are promptly and securely saved in the WordPress database.

This entire procedure would be useless without your ability to retrieve the data your customers have entered into the custom fields you have added, so this piece of the code is very crucial. Don’t forget it!

/**

* Update the order meta with field value

*/

add_action( ‘woocommerce_checkout_update_order_meta’, ‘tl_some_custom_checkout_field_update_order_meta’ );

tl_some_custom_checkout_field_update_order_meta( $order_id ) {

if ( ! empty( $_POST[‘some_field_name’] ) ) {

update_post_meta( $order_id, ‘Some Field’, sanitize_text_field( $_POST[‘some_field_name’] ) );

}

}

With this code, the customer’s additional information will be now saved once an order is placed.

]]>
https://www.themelocation.com/how-to-add-custom-field-to-woocommerce-checkout-page/feed/ 3
How to add custom fields to user registration form in WooCommerce? https://www.themelocation.com/how-to-add-custom-fields-to-user-registration-form-in-woocommerce/ https://www.themelocation.com/how-to-add-custom-fields-to-user-registration-form-in-woocommerce/#comments Wed, 03 Jan 2018 11:07:16 +0000 https://www.themelocation.com/?p=12 2015-09-16_1618
The easiest way: Using a custom registration form plugin:

We get it – code can sometimes be really confusing, especially without an exhaustive background of HTML and PHP!

So, we created an Add Custom Fields plugin which would allow you to easily add custom fields to the Checkout and My Account page in your WooCommerce store.

By using our plugin, you can edit registration form fields without touching a single line of code! Click here to learn more.

——–

By default, the WooCommerce registration form only includes and requires an e-mail address and a password to keep the registration page fast and simple for the user’s convenience.

However, many times e-commerce site owners would want to gather more information about their new users to effectively target and optimize their online marketing effort. Providing a custom registration experience is a lucrative option which would help in maximizing company data about customers who are already interested in their products.

This is why many users would ask, “How do I add custom fields in the user registration form on the My Account page?” For many beginners, to add extra fields to the registration page would be quite a daunting task, given that it would require working with some PHP code. But we’ve got you covered.

In this tutorial, we will learn how to add custom registration fields through PHP code and through a custom registration plugin.

Enabling the registration form:

To get started, go to WooCommerce > Settings. Under the Accounts tab, look for the Enable Registration setting in the Account Pages section.

Ensure that the WooCommerce membership registration form is not enabled on the Checkout page, but also on the My Account page by enabling the appropriate checkbox. After enabling this option, you should see the registration form in the frontend.

Adding fields to the registration form through PHP:

As you can see it is a pretty modest form, but We can add more fields to this form by using the following WordPress/WooCommerce actions.

Actions are simply a quick method to add custom code at specific places within a WordPress site. In this case, we want to edit the WooCommerce registration form and add registration form fields. These two are relevant actions based on what we want to achieve:

  • woocommerce_register_form_start ; Appears before the “Address Email” field
  • woocommerce_register_form ; Appears after the “Password” field

Now, to add custom fields to the WooCommerce registration form, such as first name, last name, and phone number, add the following lines of code at the end of your theme’s functions.php file.

/**

* Add new register fields for WooCommerce registration.

*

* @return string Register fields HTML.

*/

functionwooc_extra_register_fields() {

       ?>

 

       <p class="form-row form-row-first">

       <label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />

       </p>

 

       <p class="form-row form-row-last">

       <label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />

       </p>

 

       <div class="clear"></div>

 

       <p class="form-row form-row-wide">

       <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php if ( ! empty( $_POST['billing_phone'] ) ) esc_attr_e( $_POST['billing_phone'] ); ?>" />

       </p>

 

       <?php

}

 

add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

The example code above defines a function containing three new required form fields (first name, last name, and phone number) and assigns the values entered by the user to the built-in WooCommerce customer attributes, which has provisions for billing information such as the aforementioned.

The functions.php the file can easily be accessed by visiting Appearance -> Editor and navigating to the Theme Functions (functions.php) link in the right-hand side.

After updating the field, the new fields would be added to the registration form. This would be visible once you refresh My Account.

Making sense of the billing_ prefix:

If you would look closely at the code snippet provided above, the name attribute of the form fields always begins with billing_.

What this does is that it associates the registration form fields with the billing address WooCommerce stores for the user. This means that by using the billing_ prefix, once the user registers and enters the information we ask, the user will no longer have to retype the same information again in the future.

This is a useful feature because users would definitely be annoyed if they have to re-enter the same information they’ve registered with in the checkout process, for example.

Here are some other valid form fields that can be added to the custom registration form and can be associated with WooCommerce billing information:

  • billing_first_name
  • billing_last_name
  • billing_company
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_email
  • billing_phone

Enabling validation of the extra registration fields

To discourage the users from entering dummy information in the custom registration fields that we have created, it is a good idea to validate the new fields. To achieve this, the following lines of code can be added at the end of your functions.php file:

/**

* Validate the extra register fields.

*

* @param string $username         Current username.

* @param string $email             Current email.

* @param object $validation_errorsWP_Error object.

*

* @return void

*/

function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) {

       if ( isset( $_POST['billing_first_name'] ) && empty( $_POST['billing_first_name'] ) ) {

              $validation_errors->add( 'billing_first_name_error', __( '<strong>Error</strong>: First name is required!', 'woocommerce' ) );

       }

 

       if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {

              $validation_errors->add( 'billing_last_name_error', __( '<strong>Error</strong>: Last name is required!.', 'woocommerce' ) );

       }

 

 

       if ( isset( $_POST['billing_phone'] ) && empty( $_POST['billing_phone'] ) ) {

              $validation_errors->add( 'billing_phone_error', __( '<strong>Error</strong>: Phone is required!.', 'woocommerce' ) );

       }

}

 

add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 );

The function in the code snippet above simply compares the text entered by the user with the $_POST array, which would ensure that the form values are valid, displaying an error if it isn’t or if it no data is entered at all.

In this way, you can add multiple validation rules and add validation rules to other fields as well. You can see one of our custom validation rule being applied:

 

Saving the values to the database:

To finish things up, we need to save the values gathered from the Woo user registration custom fields to the MySQL database of our WordPress installation.

Similar to the process done above, add the following function in your theme’s function.php file:

/**

* Save the extra register fields.

*

* @paramint $customer_id Current customer ID.

*

* @return void

*/

function wooc_save_extra_register_fields( $customer_id ) {

       if ( isset( $_POST['billing_first_name'] ) ) {

              // WordPress default first name field.

              update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

 

              // WooCommerce billing first name.

              update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

       }

 

       if ( isset( $_POST['billing_last_name'] ) ) {

              // WordPress default last name field.

              update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

 

              // WooCommerce billing last name.

              update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

       }

 

       if ( isset( $_POST['billing_phone'] ) ) {

              // WooCommerce billing phone

              update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );

       }

}

 

add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

Once this is is done, the newly added fields are already made visible in the frontend registration page, checked for validity, and saved in the database for future use.

You can visit the My Account page and look for the Billing Address section to verify that the values from the registration form are already being populated.

 

]]>
https://www.themelocation.com/how-to-add-custom-fields-to-user-registration-form-in-woocommerce/feed/ 4
7+ Best Free/Paid WordPress Membership Plugins Compared 2018 https://www.themelocation.com/wordpress-membership-plugins/ https://www.themelocation.com/wordpress-membership-plugins/#respond Wed, 03 Jan 2018 08:10:56 +0000 https://www.themelocation.com/?p=825 Anybody remembers the days when WordPress was meant for blogging? When it’s main function was to login, post your next article or blog post, publish it and then read and reply the readers’ comments?

WordPress, thanks to being open source and having gathered a huge and amazing community, has progressed far more than that. It is now a full-fledged CMS, with plugins that allow for media management, e-commerce, and even forum functions and multi-user communities. WordPress can even be your CMS of choice for your membership site, thanks to a plethora of plugins, both free and commercial, that can help you build your new user website.

We have tested 8 free WordPress membership plugins and ranked them according to an array of criteria. Also, we read a big number of reviews of a number of paid plugins and we present our thoughts on them.

FREE MEMBERSHIP PLUGINS

The plugins We compared:

The comparison was focused on three points:

  • EoU: Ease of use (ease of configuration, intuitive interface, documentation, shortcodes, theme integration). Max score: 3.
  • Fea: Features (membership and groups hierarchy, payment forms integration). Max score: 4.
  • Func: (Popularity, user reviews, compatibility with WordPress 4.7+). Max score: 3.

Comparison Table

EoU (max:3) Fea (max:4) Func (max:3) Total
Users Ultra 2.5 2 3 7.5 /10
Ultimate Member 2 1 2 5 /10
Paid Member Subscriptions 1.5 2 3 6.5/ 10
Simple Membership 3 3 3 9 /10
WP-Members 2 2 2 6 /10
Paid Memberships Pro 2 4 3 9 /10
s2Member Framework 1 2.5 2.5 6 /10
Groups 2 3 3 8 /10

Users Ultra Membership Plugin: 7.5/10

EoU: 2.5 – Fea: 2 – Func: 3


Users Ultra Lite offered to create automatically for me the sample pages to get started, while offering the shortcodes and the option to choose the page slug. It plays nicely with the twenty- themes that I tried, as well as with a few free themes with more complex visuals.

Users Ultra Lite Page setting

The documentation is pretty exhaustive, and their user forums seem active.

It offers plenty of features, and all of them customizable. There is Mailchimp and Woocommerce integration, protected content for different membership plans, users media galleries and many more features.

On the flip side, it only uses PayPal integration and, at least in the free version, there is not an intuitive way to use social login.

Ultimate Member: 5/10

EoU: 2 – Fea: 1 – Func: 2


I have to say that, upon activating this plugin, I got put-off by the fact it automatically installed 7 top level pages in my WP site. I understand it is done with ease of use in mind, however I would have appreciated been given a choice – something other plugins reviewed here pulled off.

Ultimate Member

The plugin offers many features to build a community – your members can build profiles, media directories, view content on a per-membership basis. However, paid subscriptions is not the main focus of this plugin and, as such, paid options are not integrated at all. While membership brings to mind forums and users community, the focus of membership plugins has clearly steared towards the paid subscription side. And Ultimate Member clearly lacks on this field.

Paid Member Subscriptions: 6.5/10

EoU: 1.5 – Fea: 2 – Func: 3


The “Paid Member Subscriptions” plugin doesn’t get enough love. Of the 5000+ active installs in 15+ languages, it only has about 30 reviews. It might be due the unfortunate choice of a name, very similar to another very popular free membership plugins (also reviewed in this article).

Paid Member Subscriptions - Creating a subscrpition plan
Adding a membership/subscription group


Paid Member Subscriptions - Granding access to content
Assigning post access to a group

This plugin has a robust interface, with all the important information concentrated in one page. After you create membership plans, you can charge your users (only through PayPal), restrict content, create new user roles based on the membership name. One thing that this plugin does not, is create the necessary pages for login/register. The user has to manually create the pages and insert the shortcodes that give them the necessary functionality.

Simple Membership: 9/10

EoU: 3 – Fea: 3 – Func: 3


Another plugin that doesn’t get enough love. With over 20000 active installs, it only sports a bit over 100 reviews in the WP plugin directory and it is barely ever mentioned in comparisons between membership plugins.

Simple Membership

With this free plugin you get unlimited number of membership levels, content restriction by post/page and by category. It also offers payment through PayPal and Stripe. Everything is configurable, most of the options you would expect it to have are there and it plays nicely with the tested themes.

WP-Members: 6/10

EoU: 2 – Fea: 2 – Func: 2


The free version of the WP-Members plugin allows you to request your users to subscribe so that they can see your full content. Everyone else can only see excerpts of your posts (and your pages, if you so choose). The idea is simple and works! While not as versatile as other membership plugins examined here, it certainly does let you build a site with premium content.

WP-Members

This plugin does not offer different membership levels, or the option to only hide some posts from non-subscribed users. It also does not allow you to charge for access to your site – you need the Premium version of the plugin to do this. And if you wonder how is it like to deploy the Premium version of this plugin on a large content site, all you have to do is to check the very extensive documentation of WP-Members. By subscribing to their site as a member, you get access to plenty of extensions that will add almost every possible functionality to WP-Members.

Paid Memberships Pro: 9/10

EoU: 2 – Fea:4 – Func: 3


The first thing to jump out when I searched for the Paid Memberships Pro, was the amount of extra addons for integration with systems such as bbPress, Woocommerce, Mailchimp, etc. You can see the full list, after installing Paid Memberships Pro, in the “Add Ons” tab.

Results of &quot;Paid Memeberships Pro&quot; search

The amount of things that this plugin can do with the extra add-ons is almost overwhelming; every possible feature you’d imagined you want from a membership plugin is there, and several things you never imagined. Including content delay; this is a feature also known as content dripping and, apparently, it is very sought upon in membership sites.

Many of the extra add-ons – such as the content delay – are paid, however the amount of features offered in the free version is still on the overwhelming side. Membership levels, payment by PayPal, Stripe and even by check, discount codes, as well as the free extra add-ons to integrate your WordPress site with Mailchimp, bbPress forums, as well as KISSmetrics to track user activity; it is, without a doubt, a very feature-rich plugin.

s2Member Framework: 6/10

EoU: 1 – Fea: 2.5 – Func: 2.5


The s2Member plugin redirected me to an overview/help page immediately upon activation.

s2Members Getting Started

This is positive, implying that the developers have a well thought-out documentation, nevertheless it is a bit off-putting for a non-technical user, because it says that it might have a learning curve. Does it, though?

The features are comprehensive, with detailed options and plenty of different restriction options, content download options (including even content hosted on a CDN), notifications, and more. Out of the box Mailchimp and bbPress integration, as well as PayPal payment are certainly on the plus side.

However, it’s interface is not as intuitive as other plugins reviewed here and it might be intimidating for a non technical user. Also, I was slightly disappointed that only 5 membership types were supported; it is highly unlikely that any kind of setup will need more than 5 membership levels, however most other plugins offer unlimited levels and I’ve come to expect this as a feature.

Maybe the most interesting feature that s2Member Framework offers is a very exhaustive list of options for content restriction. It really allows you to control every part of your web and only give access to the users you want, with category and tag restriction options, sell individual posts with a “Buy now” options and even only restrict part of the post or page content.

Groups: 8/10

EoU: 2 – Fea: 3 – Fun: 3


Groups is a robust, feature-rich plugin that, together with the recommended extensions, free and pro, it can cover most needs of a membership site owner.

Recommended extensions for Groups

The first thing you want to do upon installing this plugin, is to check out the capabilities offered. There are many capabilities, aptly named, and extensive, allowing you to offer any combination of access rights to your users.

Supporting an unlimited number of groups, you will really find there is no limit to how many group/capabilities combinations you can have, to define different membership levels.

Integration with PayPal, Woocommerce and Gravity forms with their free extensions, as well as a custom newsletter and forum capability, and , additionally, access control with shortcodes, there is a reason that over 20000 users use this plugin.


Thank you for reading our review; please note that the above mentioned ranking are based on personal opinion, after individually testing the above free WP plugins.

PAID MEMBERSHIP PLUGINS

Here are the plugins we are examining here:

MemberPress


MemberPress is one of the most popular premium plugins for membership sites. It is also one of the most acclaimed plugins, considered as the number one of its niche by many reviewers.

MemberPress Memberships page

MemberPress Memberships page

While it does not offer a demo, the MemberPress offers enough screenshots and information to get a good idea about it. I would say it is clear that it is packed with features, comprehensive, and intuitive enough to be easy to set-up.

Theme-neutral, easy to integrate with any forum software, plays nicely with WooCommerce, works with 12 different email marketing systems, content delay features, payments through PayPal, Stripe, Authorize.Net. Also, a praising review from Chris Lema and other blogs and sites focusing on WordPress; I can certainly see why MemberPress is considered the number one plugin for membership sites.

Membership Add-on for iThemes Exchange


This plugin is brought to you by the same guys who created BackupBuddy and it is an additional plugin you buy on the top of their e-commerce system, Exchange.

Membership Add-on for iThemes Exchange

Membership Add-on for iThemes Exchange

Having, again, no access to the back-end, I can simply say that, based on the features they offer and the back-end screenshots, it seems amazing. The fact that it is integrated on an e-commerce system gives a multitude of possibilities for your membership site. You want to sell a physical product only to your gold members? Want to have your e-shop for everybody and only offer discounts/special prices to your subscribers? It looks perfectly possible with this setup.

The Membership Add-on for iThemes Exchange gets overall very good reviews and the company behind it is reputed for their quality customer service. This plugin is probably one of the best out there.

Restrict Content Pro


Before I start looking the features of a plugin, I do a quick search to find the online documentation and whether there is a demo or not. The Restrict Content Pro had both. You can see what the registration form looks like and browse through their amazingly detailed documentation.

Restrict Content Pro – Editing a subscription

Restrict Content Pro - Editing a subscription

Is Restrict Content Pro a good solution for your particular setup? Find out in the Use-case pages. Wonder how intuitive is the interface? Loads of screenshots for you to get an idea.
Restrict Content Pro offers a robust membership management, with out of the box integration with MailChimp, PayPal and Stripe, as well as members dashboard, discount codes system, and more. It is also extensible; with the extra addons you can add content delay support, group accounts and more.

WP Membership


Code Canyon’s WP Membership is one of the most affordable membership plugin options, at $34. It offers a demo of the logged-in user dashboard.


WP Membership – Categories visibility
WP Membership - Categories visibility

First thing to notice upon logging in, is that the demo uses an older WP version (version 4.5.3). The information page claims that it is compatible with WP 4.6.x and 4.7.x, however the last update was on May 2016.

This plugin offers PayPal and Stripe payment, MailChimp integration, several predefined membership types and pricing tables and a coupon system. It is an affordable solution for a simple subscription site.

Paid Memberships Pro


Did you read our Free Membership plugins article? If so, you might remember me being very impressed with the free version of the “Paid Memberships Pro” plugin and giving it a score of 9/10.

Paid Memberships Pro – Membership levels admin
Paid Memberships Pro - Membership levels admin

My main point about the free version was how you get loads of features and extra add-ons that can cover most needs. Here is what you additionally get if you buy the PMPro Plus version. To name only a few, you get content dripping, social login, WP Affiliate Platform integration and so many more!

WP eMember


The eMember plugin has been around for a long time. It is mature, solid and powers plenty of subscription sites.

WP eMembers – Custom fields settings
WP eMembers - Custom fields settings

It includes many options, such as unlimited membership levels, content access levels, MailChimp and WooCommerce integration and use of the Google First Click Free feature.

Actively developed, compatible with the 4.7 WP version, with extensive documentation, user dashboard demos and having almost all the main features you would expect from a membership plugin, it is certainly a worthwhile solution.

Digital Access Pass (DAP)


DAP has also been around for a long time. Over 8 years of active development, it is a plugin made specifically for WordPress, but that also works for plain PHP/HTML web sites. The documentation brings you to an outdated-looking site with frames, however the documentation itself is up-to-date and comprehensive. Still, the content might feel a bit too technical to the average WP site owner of 2017.

DAP Admin Dashboard Home
DAP Admin Dashboard Home

DAP claims that they invented content dripping – and all the reviews I’ve found on DAP agree on one thing: It does content dripping right. The “Tru-Drip” feature is meant to allow you to manage the content delay in any way you want; you also can delay all types of contents, by posts, categories, even media files. It also offers plenty of options for upsells, unlimited membership levels, teaser content and much more.

MemberMouse


MemberMouse is a plugin following the SaaS (Software as a Service) model, so it comes with a monthly subscription and different packages according to the number of members you want to manage.

MemberMouse – Product Settings
MemberMouse - Product Settings

It has more than enough features to justify the high pricing, such as unlimited membership levels, content protection, content delay, support for affiliate programs, upsells, coupon systems and much more. It supports PayPal, Stripe, Authorize.Net payment, integration with MailChimp and other mailing list providers and their API seems to be quite versatile. They have import wizards for easy migration from a number of other membership plugins as well; this can mean that many people migrate to MemberMouse.

Overall, MemberMouse is feature-packed, but comes with a higher price tag than other plugins with similar features.

Magic Members


Another “oldie” of the available membership plugins, Magic Members has been around for 7 years and is still actively developed.

I checked our their online demo; and you should, too, if you are considering using it! Unlike the demos offered by some other plugins on this list, this gets you directly to the admin’s control panel, not just a user’s dashboard.

Magic Members – Admin Panel
Magic Members - Admin Panel

Regarding features, it has everything you’ve come to expect from a membership plugin. Unlimited membership levels, content protection and delay, pay per post or pay per view features, integration with MailChimp and other autoresponders, integration with forum, such as SimpleForums and WP Mingle and a long list of supported payment gateways, including PayPal, Stripe, Authorize.Net, and several more.

s2Member Pro


The pro version of the guys who developed the free s2Member Framework, reviewed in the first part of this article.

One of the things I pointed out reviewing the free version was the limited membership levels. Well the Pro version comes to remedy that, offering unlimited paid membership levels. It also offers PayPal, Stripe and Authorize.Net integration, content dripping with the use of shortcodes, coupons and gift/redemption codes and more.

It still stays incompatible with WooCommerce and, as I said in the free Framework review, it might be intimidating to set up and configure for the non-technical user.

PrivateContent


Another affordable option from the codecanyon guys, PrivateContent is here to let you create membership levels and assign them access to your content.

That’s all. That’s all it does, and it seems to be doing it really well.

PrivateContent – Users List management
PrivateContent - Users List management

There is something I personally like very much about doing one thing and doing it well. PrivateContent seems to be doing this, and it is extensible, while still affordable, for those who want more features. You want to charge for your content? WooCommerce integration? Mailing lists with MailChimp? You can buy extra add-ons to add this functionality.

Ultimate Member


My impression of the free version of Ultimate was not great. I was not happy that it created pages to use for registration, logging in, etc, without giving me a choice to opt-out and create my own pages instead. I was not happy with the warning I got that the automatically created pages cannot be deleted.

I was also not impressed with the set of features offered. However, the paid version – which is not really a version but an extension bundle with 18 additional addons adds several features that can be useful for a community building. MailChimp, bbPress and WooCommerce compatibility, social login, friends and followers functionality and more.

The focus is still on the community building, rather than the membership/subscription function. However, if that is what you need, and you need to base your community on WordPress, Ultimate Member might be what you need.

]]>
https://www.themelocation.com/wordpress-membership-plugins/feed/ 0