WordPress
A small part of the project work carried out is using WordPress. Setup and edit a theme/child theme to create a working website which will host a shop and allow test payments to be processed. My WordPress website is live on a testing server. I have done sites offline with WordPress and they can be more trouble than they are worth when moving them to live as sometimes the offline install is different to a live installation. So done the WordPress work live so I dont get a headache later when I try push it live.
The point of the child theme is that when the actual theme is updated, it does not wipe any customisations. This depends on where the customisations are entered into the theme itself as some themes allow customisation. However the main problem with a theme is that you are restricted to using someone else layout/user interface. Most themes are built using divception (a div within a div within a div and so on…). These make websites bulky which increases server load times. For this project I have installed a plugin called Oxygen Builder which disables the theme. In turn this gives me much more control over my site but does require a bit more work to get it up and running.
This is a list of the plugins running on my DWT website. The Oxygen plugins are purely cosmetic or introduce pre-built features which enhances the UI a little bit more than the default view. The WooCommerce plugin allows me to edit every element for my shop. So I get free reign over my website and can lay it out it how I wish rather than folding to someones work with a pre-built theme.
JSON Basic Authentication is used for my WP Rest API work. Code Snippets is used for external file support, either in the form of JavaScript or PHP snippets. As the builder does not use a theme, there is no functions.php file. It is possible to create and use a functions.php file but it can get messy, the easiest solution is to use a snippet that runs on the frontend, backend or both as of when required.
The plugins outwith Oxy are WooCommerce which is the default for an e-commerce website within WordPress. Stripe Gateway for the payment which allows card payments. This is one of the easiest plugins to install and setup, especially for only test payments. A side cart plugin so I dont need to play with the navigation bar with adding a basket or conditions to show a basket if something added to card. Quick and simple plugin does this for me.
SVG Support which allows me the use of SVG images as without this, the media library stops SVG uploads as can be a security risk. The File Manager allows me to access the backend without me logging into the backend.
My UI within the Oxy builder is shown below. There is some nice pre-set options for different things but looks pretty similar to most builders. There are thousands of themes available for WordPress but the more it is used, the more you see the same builders used within the themes, some of the common ones are Avia, WP Bakery, Elementor, Divi to name a few.
Within the Oxygen plugin I create templates which I can append to different options from a single page, to certain page or every page. I can target archive pages which is what is done for Ecommerce setup. I target all products and product_variations meaning if there is more products added at a later date then they use the same template unless specified. The template also has priority so it is possible to show different layouts for different product pages where applicable. The build works very well with dynamic data which is what I use to build the shop and product pages.
WooCommerce
When the WooCommerce plugin is added, it creates a My Account, Cart, Checkout and Shop page. These are displayed using shortcode and can be changed by looking up the Woo documentation. It also creates a WooCommerce and Products side panel as well as Analytics and Marketing but I wont be looking at these for this project.
Clicking on the product tab brings up a host of options;
Category is the type of product that it is, more than 1 can be selected if applicable.
Tags are mainly used for SEO and I dont use them within this site, they can also be used to call related products and link to products similar to a category.
Attributes which are used for a variable product – An example of which would be Size where the Terms set could be S, M, L, XL, XXL within a clothing product.
When creating a new Product your asked for the Name, Description (which is added to the bottom of the product for the main description which is confusing at first), Product Data and Short Description (this is added to the top of the product a bit like an excerpt). The Product data shown below allows an SKU to be added (barcode type identifier which is required to sell the products on some sites such as Amazon), stock management and sold individually (if the item can only be bought in a single order, such as heavy items for shipping).
The variable product I have in this example is “Chocolates Assorted” from the DWT shop. There are linked products pre-set to show on the page. On top of this linked product I have my template also set to show linked products with a manual query which overrides this method. Screenshot is to show how this works out of the box.
Attributes set for Quantity with 3 sizes (Terms)
Then Variations set for the 3 size attributes which allows the product to be priced amongst alot of other options.
The product above can be viewed here. Some of the products like the 500g option are out of stock which is not shown on the screenshot but was to show different options available. When the product is added to the basket a small basket appears which has the following options shown below. Sadly the admin bar gets in the way of it when logged in as an administrator. This can be adjusted with CSS but as it is a showcase site, I left it as it comes out of the box.
Avada is a very common theme that is built for WooCommerce. The most
common theme I’ve found companies use within WP is Enfold. These 2
themes are the most common I’ve come across. Sadly for any
customisations, they require heavy CSS changes with lots of !important
tags to override the defaults.
Out of the box, WordPress is very easy to install and setup WooCommerce for an E-commerce website. Takes under 30 minutes to set this up. It would be less if I had used a theme that does it for me. The shop is very basic and further customisations as well as tax or shipping setup can take considerable amount of time, but when it is setup, it requires next to no more input and runs like clockwork.
