Hey everyone … this is my first full WordPress site and I wanted to share how I did it in case it helps someone out there … I used only free plugins and a free theme … here’s the breakdown
Theme: Kadence basic theme (I created a child theme using the Child Theme Configurator plugin to edit CSS and add JavaScript)
Plugins:
| Advanced Shipment Tracking for WooCommerce | Ajax add to cart for WooCommerce - Adds items to cart without refreshing the page |
|---|---|
| Checkout Field Editor for WooCommerce | Customer Reviews for WooCommerce |
| Jetpack - contact forms, etc. | Kadence Blocks – Gutenberg Blocks for Page Builder Features - Page Builder |
| LiteSpeed Cache - Cache and CDN | Rank Math SEO - SEO |
| Site Kit by Google - Analytics | WooCommerce - e-commerce |
| WooCommerce Payments | WooCommerce Shipping & Tax |
| WPC Fly Cart for WooCommerce - best free cart I found |
Web hosting: Namecheap hosting & domain.
Site speed tips:
1- Avoid cheap hosting like Namecheap or GoDaddy. No matter how good your caching and CDN setup is, slow hosting will still hold you back. I’m hosting my second WP site on AWS EC2 (free plan) and it’s much faster and smoother (check out the YouTube video “How to Host WordPress on EC2” by Tony Teaches Tech).
2- For caching, CDN, and image optimization, I use the LiteSpeed Cache Plugin.
3- Skip Elementor. I found Kadence Blocks for Gutenberg to be better and less resource-heavy.
More details:
| Video Timestamp ↓ | Description ↓ |
|---|---|
| 00:00 - General design / Blocks / Sections | Kadence blocks builder adds extra blocks to the default WP editor. It’s really good. The theme customizer for Kadence Theme is also very comprehensive, even in the free version. |
| 00:34 - Single product page | I customized the product page manually for each product without extra plugins. The original WooCommerce product page was turned into the review page. It’s more work, but it works for now. |
| 00:46 - Cart | This was the best free cart I found. I added some JavaScript to the functions.php file of the child theme to place it in the header navigation. Also tweaked the CSS a bit, but it looks good with default settings too. |
| 00:54 - Product archive | Made from scratch, similar to the single product pages. |
| 01:08 - Account | Default WooCommerce account page. Works fine so far. |
| 01:23 - Checkout | Added a VAT number field. I set free shipping because syncing shipping with my supplier (cjdropshipping) was tricky. |
| 02:01 - Supplier dashboard | Cjdropshipping is semi-automatic. Order info goes from WooCommerce to the CJ dashboard, where you select shipping type and pay for fulfillment. The CJ tracking number syncs with the Advanced Shipment Tracking for WooCommerce plugin. |
| 02:06 - Search | Edited CSS and PHP to display only products and blog posts. Otherwise, it’s the default setup. |
| 02:17 - Blog | Nothing special, just the default blog. |
| 02:52 - Reviews | This page was originally the single product page. I edited it with CSS and JS, leaving only the review section. Customer Reviews for WooCommerce allows image uploads, which I made mandatory. I added JavaScript to prevent submissions while images are loading. |
| 03:23 - Contact form | Jetpack plugin contact form block. Submissions go straight to the “Feedback” section of the WP dashboard. Same for the Returns and Complaints form. |
| 03:28 - Legal stuff | Returns / Business Details / Complaints / Terms and Conditions / Terms of Use / Privacy Policy / Cookie Policy. Inspired by Apple’s website policies. |
| 03:53 - Mobile responsive | Mostly straightforward with some custom CSS. The block builder and theme customizer handle most of the responsiveness. |
Even with some coding experience, this took me 2 months to complete and was quite challenging. It would’ve been much harder without the WordPress community, so I’m sharing this to help others.
I used to dislike site builders, but for solo devs or small teams, I think WordPress is a great option. I learned a lot.
Feel free to ask questions in the comments.
Cheers everyone