Category: Assignments

Why My Choice

     For my final project I chose and e-commerce store. Just a few years ago I had a couple of online stores using Shopify. It allowed me to setup a store and add products quite easily. I wondered how much tweaking I needed to do to get one going on WordPress and my decision was made.

Plugins

     As I mentioned in my prior blog about the plugins, I installed in WooCommerce. It was not much of an issue to setup. But not very intuitive when it comes to really setting up the store. I do need to play with the Dropshipping plugin for WooCommerce. This is a deal maker if I can make that work. Just need to setup my accounts again to make that work. The plugins that cost me some money I didn’t really install. I would have considered it if was a real store and the cost of return would have been worth it. 

I did install a few more plugins. Here is a list of all the ones I have.

• Akismet Anti-Spam: It protects your blog from spam.
• ALD – Dropshipping and Fulfillment for AliExpress and WooCommerce: It transfers data from AliExpress products to WooCommerce effortlessly and fulfills WooCommerce orders to AliExpress automatically.
• *This one is important for me since this is what I use to do on Shopify
• All in One SEO: SEO for WordPress with features like XML Sitemaps, SEO for custom post types, SEO for blogs, business sites, ecommerce sites, and much more.
• Blocksy Companion: This plugin is the companion for the Blocksy theme, it runs and adds its enhacements only if the Blocksy theme is installed and active.
• Bulky – Bulk Edit Products for WooCommerce: Bulk Edit Products for WooCommerce helps easily work with products in bulk. The plugin promises to help users to save time and optimize manipulation when working with products in bulk.
• Elementor: Website Builder has it all: drag and drop page builder, pixel perfect design, mobile responsive editing, and more. Get started now!
• Elementor Beta (Developer Edition): Each Developer Edition release will contain experimental functionalities that developers will be able to use to get familiar with the next releases before they are published.
• Elementor Pro: Elevate your designs and unlock the full power of Elementor. Gain access to dozens of Pro widgets and kits, Theme Builder, Pop Ups, Forms and WooCommerce building capabilities.
• Email Template Customizer for WooCommerce: Make your WooCommerce emails become professional.
• EXMAGE – WordPress Image Links: Save storage by using external image URLs.
• Facebook for WooCommerce: Grow your business on Facebook! Use this official plugin to help sell more of your products using Facebook.
• Google Analytics for WordPress by MonsterInsights: See how visitors find and use your website, so you can keep them coming back.
• Google Listings and Ads: Native integration with Google that allows merchants to easily display their products across Google’s network.
• Gutenberg: Printing since 1440. This is the development plugin for the new block editor in core.
• ImageMagick Engine: Improve the quality of re-sized images by replacing standard GD library with ImageMagick
• Jetpack: Security, performance, and marketing tools made by WordPress experts. Jetpack keeps your site protected so you can focus on more important things.
• Jetpack Boost: Boost your WordPress site’s performance, from the creators of Jetpack
• Jetpack CRM: Jetpack CRM is the simplest CRM for WordPress. Self host your own Customer Relationship Manager using WP.
• MailPoet: Create and send newsletters, post notifications and welcome emails from your WordPress.
• OptinMonster: is the best WordPress popup builder plugin that helps you grow your email newsletter list and sales with email popups, exit intent popups, floating bars and more!
• Product Variations Swatches for WooCommerce: The plugin displays variation select options of the products under colors, buttons, images, variation images, radio so it helps the customers observe the products they need more visually, save time to find the wanted products than dropdown type for variations of a variable product.
• Site Kit by Google: Site Kit is a one-stop solution for WordPress users to use everything Google has to offer to make them successful on the web.
• The Events Calendar: is a carefully crafted, extensible plugin that lets you easily share your events. Beautiful. Solid. Awesome.
• TikTok: With guided & simple setup prompts, you can sync your WooCommerce product catalog and promote it with custom ads without leaving your dashboard
• WooCommerce: An eCommerce toolkit that helps you sell anything. Beautifully.
• WooCommerce Amazon Pay: Amazon Pay is embedded directly into your existing web site, and all the buyer interactions with Amazon Pay and Login with Amazon take place in embedded widgets so that the buyer never leaves your site.
• WooCommerce Payments: Accept payments via credit card. Manage transactions within WordPress.
• WooCommerce Shipping & Tax: Hosted services for WooCommerce: automated tax calculation, shipping label printing, and smoother payment setup.
• WPForms Lite: Beginner friendly WordPress contact form plugin. Use our Drag & Drop form builder to create your WordPress forms.
• (Google site kit, Akismet Anti-Spam, Jetpack, and a few more). These additional plugins added some security to my site.

Customization

     Choosing a theme for my store was the next step for me. I did some web research and came across Blocksy. It was light weight and had WooCommerce built-in which would of saved the trouble of installing it. I did create a child theme for customization.

     Blocksy works with Gutenberg and Elementor site editors. I had Gutenberg already installed. It still wasn’t getting the feel I wanted for the site. So I did install Elementor. Once I switched to Elementor was in foreign ground on editing the site. Gutenberg was easier in editing a post compared to the Elementor I installed. After a while it was getting familiar.

With my research with my themes, I learned that you could import a starter template. On the WordPress dashboard I clicked on Blocksy. Then I chose the Starter Sites tab. I settled on Gardenrobe templet to import.

With the customizer I inserted my own logo and changed the footer of the site. The footer I added links to terms and conditions, return policy and contact us. On the home page I removed the paragraph and added my latest post. I removed some pages from my site to clean it up. I added a product and gave it a category of electronics. The template added a few others as well.  

Conclusion

    It was an experience setting up this site. I really excited by the way I can carousel images on products. I do wish it was more user friendly on getting the look you want.  It will probably take me some more time tweaking the site to make it polished to the point that it is a truly good e-commerce store and be proud of it. For the most part I think I’m 90% there right now. It does basically what Shopify did for me. With a little work, and some trial and error you can get the site you want using WordPress.

My impressions of the classic editor and the new editor. They seem to be booth usable and still have issues. I my decision is a matter of preference.

The classic editor although usable feels old (web 2.0) in ways. Seems like a simple text editor just like we use on our school site Canvas. You only have one control panel on the top. Though still usable not as customizable withing the site. You can add images, lists and links.

Gutenberg gives you more customization of your posts. You have custom control panel for each block depending on the type of block you use. You also have more options like tables. Classic editor doesn’t have it as an option. Maybe you can get a plugin to add this functionality. Rearranging images is also a breeze compared to the clunky image controls of the classic.

While Gutenberg is not quite fully features like desktop publisher it does most of the job you need and It is the my choice for editing WordPress.

In the past I dabbled in E-commerce. I used Shopify then and it was pretty easy to set up. Didn’t have much experience in marketing or SEO so I didn’t do so well.

An E-commerce site would be an excellent project to do since I have used Shopify before and had a polished looking site. It would be quite a challenge to try to accomplish the same thing with WordPress and some plugins.

This will require quite a bit of tweaking accomplish this. Getting plugins to play well with each other and themes will be a challenge. The product management, coupons, cart management, and checkout. The menu will be interesting as I found out this week.

WooCommerce is your suggested plugin and will try working with that for this project.

The Image Editor

Image editor in WordPress is just enough to get started. It allows you to have basic control of the picture without needing to know any CSS or HTML. Let’s go over some of the options you have.

At the top, you have “Styles”. Here you can keep the default shape of your picture or give it a rounded look. Not a lot in this section but it does change the feel of your picture.

Next, you have “Image settings”. Here you have an “Alt text” setting. This is where you describe your image just in case the person can’t view your image. Many overlook this and is a major complaint of the visually impaired about web pages.

The “Image size” setting has just a few preselected image sizes. Thumbnail, Medium, Large and full size are the selections. Not a lot but takes care of the majority of your needs.

The “Image dimensions” setting is where you can customize the size. You can change the size or control the width and height as you like by pixel size. You can even select the size by percentage and keep the image shape ratio intact.

Now you have the “Border” section. You can adjust the radius of the image corners in px. You can do all corners at once or hit the option of unlinking to adjust corners individually.

You have the “Advanced” section. This is where you put the title attribute, HTML anchor, and Additional CSS classes.

I do wish they have a few more tweaks but I will have to settle for the plugins for any further changes.