Tag: WP

  • WooCommerce Custom Products Per Page Dropdown

    Introduction

    1. In this tutorial, you will learn to add dropdown which controls maximum how many products to show on a page.
    2. This tutorial is the continuation of custom sorting tutorial
    3. We will add a dropdown with selection options 4, 8, 16, 32 and All to control our products per page logic
    4. We will add our code logic to our existing plugin repository in GitHub in a new branch v2
    5. For your easy understanding of the logic lets, we see each and individual method with its filter separately in it’s each section instead of skimming the code from top to bottom
    6. Lets we examine each part individually to understand the logic crystal clear

    Explanation: Adding query string variables

    1. Here we will explore the snippet of the method add_query_vars_products_per_page from our plugin class VG_Sort which add our query variable show to the query variable array
    2. Direct link to the method in code repository branch v2
    1. This method accepts a single parameter $vars on line 8 (line 8 is relative to the snippet, not the full code in repository this applicable to the upcoming explanations too) which holds all the publicly allowed query variables
    2. On line 9 we added our query variable show which accepts the number of products to show per page
    3. Once our query variable string also appended to the existing query vars array we return the variable $vars
    4. This whole method is a callback method which attached to the filter query_vars please check the line number 15 for better understanding
    5. Now we can use the query var show in our code we will see that in the next section

    Explanation: Method controls product per page

    1. Here we will explore the snippet of the method custom_products_per_page of the plugin class VG_Sort this method is core logic which controls the number of products to show per page
    2. Direct link to the method in code repository branch v2
    1. This method accepts a single parameter $per_page which accepts integer value by default WooCommerce assigns 16
    2. The shop page more technically we can say product archive page which shows 16 products per page
    3. Now we will change this argument variable $per_page value to see how this affect the number of products showing on a page
    4. On line 10 we are using the WordPress helper function get_query_var which is used to fetch variable for WP_Query class we already appended our variable show we can use that in the query string
      1. The function get_query_var holds the two arguments the first one is query string variable’s name the second one is the default value if the query string show is not added in the URL
    5. From line 13 to 24 we used the switch case which handles how many products to show
      1. Inside the switch statement if the variable $count matches with any case statement for example if it is matched with 8 then $per_page assigned with the value stored in variable $count
      2. If the $count not matched with the any of the case statement then default value of 16 will be assigned to variable $per_page
    6. At last, we return the variable $per_page
    7. Once you attached this callback method to the filter loop_shop_per_page, you can test this functionality by passing query string like http://example.com/shop/?show=4 to your shop page directly

    Explanation: Template For Product Per Page Dropdown

    1. In the previous section, we implemented core logic behind the number of products to show in a page and we tested it by passing value for the query string show
    2. Lets we see the method template_products_per_page of the class VG_Sort
    3. Direct link to the method in code repository branch v2
    1. On line 9 we call the method wc_get_template which is responsible for rendering the dropdown for products per page logic
      1. This method first parameter is template name, in the method we used products-per-page.php
      2. The second parameter is an optional array parameter where we can pass any value to our template by passing an associative array
      3. The third parameter is denoting the template path
      4. The fourth parameter is where we pass the path for our template which points to the directory templates which is present inside the plugin directory itself
        1. The function plugin_dir_path identifies the plugin directory by accepting the file name here we use PHP magic constant __FILE__ which returns the file name with the full path
        2. We append the string templates/ to the plugin_dir_path returned string which is point to the directory present inside our plugin root path
    2. On line 12 we hooked our method to action function woocommerce_before_shop_loop which call our render method template_products_per_page before products rendering
    3. On that time, our HTML content present in the path plugin-root/templates/products-per-page.php will be outputted on the archive page

    Explanation: Dropdown HTML

    1. In the previous section, we saw how our template is outputting, now we will see the HTML part of that rendered template plugin-root/templates/products-per-page.php
    2. Direct link to the template in code repository branch v2
    1. The HTML is straight forward so will explain important aspects only instead of explaining like what is form, label, etc
    2. On line 7 for our form, we added our class vg-sort-show to the class attribute
    3. On line 9 for the select tag, we added the attribute onchange with the value this.form.submit() which triggers the form submission when we change the value for e.g. from 4 to 16 it will trigger the form submission
    4. In every option tag, we called the WordPress function selected which accepts three parameters and outputs selected="selected" attribute
      1. The first parameter holds the first value to compare
      2. The second parameter holds the second value to compare (which is optional)
      3. The third parameter is control whether to echo the selected attribute or not (which is optional)
      4. Official documentation
    5. On line 17 the function wc_query_string_form_fields (official documentation) is used to outputs hidden form inputs for each query string variable

    Explanation: Dropdown CSS Enqueuing

    1. We are reached the final section of this tutorial this part is responsible for styling and positioning our products per page dropdown
    2. Direct link to the method in code repository branch v2
    3. Lets we explore the method add_assets of the plugin class VG_Sort
    1. On line 9 we imported our CSS main.css which is located in plugin-root/assets/css/main.css using WordPress function wp_enqueue_style the first parameter is handle name it should be unique and the second parameter is CSS file’s URL
    2. plugin_dir_url is similar to plugin_dir_path but it returns URL instead of filesystem directory path which is appended to our CSS file
    3. This callback method is hooked to the action wp_enqueue_scripts on line 12 which is responsible for register and enqueue our asset file in the rendered HTML page

    Explanation: Dropdown CSS File

    1. The CSS file is located in the path plugin-root/asset/css/main.css
    2. Direct link to the CSS file in code repository branch v2
    1. On line 1 we are applying our CSS to form class vg-sort-show
    2. On line 2 we provided rule float: right to move our form towards the right end of the parent element
    3. On line 3 we applying o to both top and right margin 1rem to bottom to align parallel to the sort dropdown and to provide spacing between this and sort dropdown added 1.5rem to margin left
    4. On line 4 applied padding 0.75rem to top and bottom then 0 for left and right
    5. For CSS I referred CSS class woocommerce-ordering of official WooCommerce layout CSS (just inspect the default sort by dropdown form and apply whatever CSS opt for you by referring that)

    Conclusion

    1. You learned totally new concept when compared to previous tutorial, instead of altering existing one you added something brand new product per page dropdown
    2. Learned to create new HTML template and render it on the fly with help of a hook function
    3. Learned to add assets to your plugin
    4. Learned few WordPress and WooCommerce functions
  • WooCommerce Custom Product Sorting

    Introduction

    1. In this tutorial you will learn how to add custom sorting for the product archive page
    2. Renaming the existing sorting option
    3. Re-ordering the option in sort dropdown
    4. Overriding sorting form template and add meaningful title for the sorting dropdown
    5. Quick overview of how to create plugin (Yes, all our customisation are plugin based except adding title to the sorting dropdown)

    Quick Overview Plugin Creation

    1. Go to the following path wp-content/plugins in your WordPress Project
    2. Create a new directory and name it like vg-woo-sort
    3. For naming the plugin I follow the following convention either my initial or project initial hyphen plugin name
    4. Inside the directory vg-woo-sort create a new PHP file vg-woo-sort.php
    5. Once you created the file, for security purpose add this line first which blocks the direct access to our script
    1. Then add few plugin headers (Plugin Name is must)
    1. Finally go to your Plugins menu in WP Admin Panel you will find your new minimal plugin kindly activate it

    Customise Sorting Dropdown

    1. WordPress plugin functionalities can be developed either by procedural or object oriented
    2. Our plugin is developed through object oriented even though it’s simple
    3. Our plugin class VG_Sort has two callback method custom_woocommerce_get_catalog_ordering_args and custom_woocommerce_catalog_orderby
    4. Lets we see each method’s inner working in its individual section

    Plugin & Template Full Code

    1. You can find the full code for both plugin and template code in github
    2. The plugin’s core code
    1. The template’s core code

    Explanation: Ordering Method

    1. Here we will explore the snippet of the method custom_woocommerce_get_catalog_ordering_args from our plugin class VG_Sort
    1. Here and in all explanation sections the line number denotes each individual snippet’s line number not the full code section
    2. In line no 7 our method accepts single argument $args which is associative array which represents the products sort ordering configs
    3. For inspection purpose once you attached this method with the filter function add print statement print_r($args) next to line 7 and refresh your shop page
    4. In your shop page at the top the argument $args array is printed
    5. Here is the sample for the default sorting option Array ( [orderby] => menu_order title [order] => ASC [meta_key] => )
      1. The first key orderby holds two sorting values
      2. Firstly it sort with menu_order and then product’s title
      3. menu_order which can be adjusted to each products in their backend product edit page
      4. By changing the Menu order value for individual product which is under the container product data you will find set of tabs, in that tabs click the Advanced tab
      5. By changing the number from 0 to any number positive value which push the product to last and negative value will pull the product to the first
      6. If, for more than one product the Menu order is same then it will sort by title
      7. The key order is used to arrange the products either in ascending or descending
      8. The key meta_key is used to sort the product based on some custom key
      9. You can use any key-value pair as described in the official documentation
    6. In line 8 we assign $orderby_value variable by checking the get query string parameter if it’s set then we sanitise it using WP sanitise function wc_clean else assign it from option using WP function get_option which retrieves an option value for the passed option name
    7. The line between 13 and 19 is the core logic to create new sort order for the product archive page
    8. In both conditional statement we compare the get parameter value with the desired order by string and alter the $args parameter (for $args key-value we already discussed in 5th point please refer that if you need to explore more)
    9. Finally in our callback method we return the variable $args

    Explanation: Rename & Reorder Method

    1. Here we will explore the snippet of the method custom_woocommerce_catalog_orderby from our plugin class VG_Sort which is used for renaming & reordering
    1. We assume that you attached/hooked this method to the filter function woocommerce_default_catalog_orderby_options and woocommerce_catalog_orderby then only whatever you print and check will work
    2. This method’s main functionality is renaming and reordering the sort dropdown to do that first we need to know the selection option’s name and its display value
    3. So kindly add print statement print_r($sortby) next to the line 2 i.e. after the method definition and refresh the product archive page to check the argument array’s key-value
    4. It will print the array like this Array ( [menu_order] => Default sorting [popularity] => Sort by popularity [rating] => Sort by average rating [date] => Sort by latest [price] => Sort by price: low to high [price-desc] => Sort by price: high to low ) just above the sort order dropdown
    5. As you clearly noted the key, you came to know that now we will override this array’s value also we reorder the key
    6. We override it from the line 3 to 12
      1. If you don’t need any one of the ordering for example if you don’t need default order [menu_order] => Default sorting then remove that key value from the array
      2. We renamed each sort order by overriding the value like from Sort by average rating to Average rating
      3. Our new array constitutes our new sorting key-value too to display option to sort the product alphabetical or reverse alphabetical
    7. Finally we return the variable $sortby

    Explanation: Callback’s Filter

    1. We used totally three filters namely woocommerce_get_catalog_ordering_args, woocommerce_default_catalog_orderby_options and woocommerce_catalog_orderby
    1. woocommerce_get_catalog_ordering_args is the filter action deal with sorting operation
      1. woocommerce_get_catalog_ordering_args filter official API documentation
    2. woocommerce_default_catalog_orderby_options and woocommerce_catalog_orderby is the filter action deal with display sorting selection
      1. woocommerce_default_catalog_orderby_options filter official API documentation
      2. woocommerce_catalog_orderby filter official API documentation

    Explanation: Custom Template

    1. Our custom template constitutes a minimal change to clone of core template we will see detailed explanation
    1. While exploring the filter action woocommerce_default_catalog_orderby in official documentation which is present inside the function woocommerce_catalog_ordering
    2. As you skim down to the end of the function you will find at the last it calls the function wc_get_template with the first parameter as loop/orderby.php
    3. Based on our analysis we have to override the partial or sub template orderby.php which located inside the directory loop of the WooCommerce plugin templates directory (To understand the overriding concept read the article about template overriding)
    4. We copied the loop/orderby.php into our current theme in the following path woocommerce/loop/orderby.php
    5. Now we can start rewrite the HTML in our newly copied template orderby.php
    6. We enclosed our select tag inside the label tag and prefixed the select with the string value Sort By: (as you see now there is no repetition of sort by string inside the option)

    Conclusion

    1. You learned to add new sorting to your existing product archive page
    2. To modify the existing sort option
    3. To modify the template which render the sort order select option
    4. Now you have a clear understanding about sort order dropdown
    5. We covered all the logic and modification related to the sort order dropdown now you are solid to modify in and around of products sort order
  • WooCommerce Theme Overriding

    Introduction

    1. For every task there are many good and bad ways to do that
    2. WooCommerce theming also fall under this prey like directly editing the WooCommerce template files
    3. In one fine day WooCommerce may release a new version, you unintentionally update the WooCommerce plugin which results in replace of your beautiful custom shop page into default template
    4. So to avoid this we have to override our WooCommerce template in our theme directory
    5. Let’s we see it in detail

    Detect Template to Override

    1. To detect which template your current page renders you can place this snippet in your activated theme’s functions.php file
    2. Let’s we see the explanation for this snippet
    3. On line 2 of the snippet we using WordPress provided API helper function add_action which hook our function (we pass it as second parameter) in specific point or event in the context of first parameter (the action’s name wp_head technically it is called as tag)
    4. add_action accepts totally 4 parameters in that 2 are mandatory
    5. The first parameter (mandatory) is tag which is the name of that action hook like wp_head, muplugins_loaded, shutdown
    6. The second parameter (mandatory) is the function to be called at the time hook action triggers
    7. The third parameter (optional) execution priority
    8. The fourth parameter (optional) is accepts number which denotes number of arguments the hooked function accepts
    9. In our anonymous function we echoed global variable $template which output the full path of the rendering template file

    Override Product Listing Page

    1. Assume that you declared the template path identifying snippet in your theme’s functions.php file
    2. Go to any page in your WordPress you will find at the top of your page the rendering template’s file path
    3. Now go to your shop page where you will find the template path as in the given image
    4. Now we will override this without disturbing the original file
    5. In order to do that first create a directory with the name woocommerce in your active theme directory for example wp-content/themes/twenty-twenty-child/
    6. Copy the template file archive-product.php from WooCommerce plugin for path reference see the image in 3rd point and paste it in your newly created directory woocommerce i.e. inside your theme
    7. Hurray! You succeeded you learned overriding the WooCommerce template

    Edit Customised Shop Page

    1. To check whether we correctly implemented we will change few things in copied file archive-product.php in our theme directory not in the WooCommerce plugin’s template directory
    2. Open the file and replace the header section with the following snippet
    3. If you has an eagle eye you clearly note that the change is one line
    4. In line 3 changed the h1 text case to upper
    5. By default WooCommerce function woocommerce_page_title echoed the title instead of that we passed boolean false as first parameter to that function to return the title as a string
    6. woocommerce_page_title function’s return is passed as an argument to the php string function strtoupper
    7. Now if you refresh your shop page you will find that the title is uppercase
    8. We only covered tip of the iceberg of WooCommerce to customise archive page

    Conclusion

    1. You learned why must avoid overriding the WooCommerce plugin’s template directly
    2. You understand the basics of action hooks and some action hook tags
    3. You can able to detect the current page’s template
    4. You can able to modify the WooCommerce template file without disturbing the plugin’s template directory
  • WooCommerce Installation Steps

    1. Login in to your WordPress Admin panel
    2. In left menu hover over Plugins menu. In sub-menu click Add New
    3. Once you clicked Add New sub-menu it will be redirected to Add Plugins page.
    4. In the Add Plugins page’s search field enter the keyword as woocommerce.
    5. For reference please see below image at the top right corner (which is highlighted in red stroke/border) there is search field
    6. In the grid of cards click the install button (highlighted in red stroke/border) in the WooCommerce card which is at the position 1 in the attached image
    7. Once you installed successfully click the Activate button (for reference please see the below image with highlighted stroke/border)
    8. After the successful activation of WooCommerce it will redirect to setup wizard these steps are optional either you can skip now by clicking the link “Not right now” or fill it

  • WordPress Installation Steps

    1. Download WordPress source zip from the following link WordPress Download Link
    2. Unzip the downloaded WP (WordPress) in your web server directory. For e.g. in Ubuntu the path will be /var/www/html/
      1. Command to unzip in Ubuntu server
        unzip wordpress-5.2.1.zip -d /var/www/html/
    3. Once unzipped in your web server rename as your project name for e.g. vijayan.in
      1. Shell command: mv wordpress/ vijayan.in
    4. Reload your newly copied WP site in your favourite web browser
    5. On the other hand side please confirm you created a new database for your WP site
      1. MySQL statement: CREATE DATABASE wp_learn;
      2. Refer syntax: Create Database Documentation
    6. Click the Let’s go! button (refer 4th point you will find button at the last)
    7. You will be redirected to the following screen
      1. By seeing the image itself you will get a clear idea what to enter
      2. If you are closely noted the table prefix is replaced from default wp to random string for the security purpose
      3. Though this random string table prefix is simple one this will be the first step to add a security to your site
    8. Sometimes if you don’t have a proper permission in your Linux server you will face the following error
      1. Run this shell command with apache’s user/group
      2. In Ubuntu the shell command is sudo chown -R www-data:www-data /var/www
    9. After executed the shell command chown refresh the installation screen in your website then the screen will be similar to the following image
    10. Once you clicked the button Run the installation the following screen will appear
    11. Click the Install WordPress button it will install the WP and you will be redirected to the following final screen
    12. Once you click Log in you will be redirected admin login if you like do administration work enter your credential detail and get logged-in else enter your website URL you will be redirected to the home page