Trinquets is an online store set up by a group of young entrepreneurs in Metro Manila, Philippines. The store delivers boxes of expertly curated women's fashion accessories straight to customers' doorsteps.
Trinquets' beautiful branding - from the company logo, corporate materials, typefaces, color swatches,  and the product boxes - was designed by Ms. Joanna Malinis, who also documented the style into an easy-to-understand brand identity guideline. My task was to build a custom ecommerce website based on the designer's guideline. I adhered faithfully to the brand designer's guideline when I created the website's UI/UX.
I recommended using WooCommerce for managing the online store. WooCommerce is a popular WordPress plugin from WooThemes powering 24% (as of May 2015) of ecommerce websites according to builtwith.com.
This project posed a few web development challenges which I am going to describe below, and the details on how I solved these challenges.
Customized WooCommerce Product Page
Trinquets has only two product variants to sell: a single box for one-off purchase, and a three-box option. The store owners did not want to display the products like a regular online store catalog but, rather, as a custom page where they can present different descriptions for the box every month and change the accompanying photos. The default catalog page for WooCommerce is not adequate in this case. In addition, the latest box on sale must also be mirrored on the homepage.
I solved the problem in three steps.
First, I created a custom post type called "Box Themes" to hold the monthly box details. I did not want to lump all data inside a single text editor. Therefore, I removed the default text editor and hid most of the default but unnecessary editor panels to organize the post editor page. Then I created custom fields for capturing the box theme information using the excellent Advanced Custom Fields plugin.
Second, I made a custom page template for the "Subscribe" page. This is the page where buyers select the product they want to buy. The store owners can update this page by adding a new entry each month in the "Box Themes." Editable areas include the model's photo in the center, the background image in the header, the deadline for subscription, the description text, among other things.
Finally, I built a homepage template that always reflects the updates made in the "Box Theme" custom post types.
To handle the days between the order deadline and product shipping when the store does not receive orders, I provided an option to turn off the latest box theme display and replace this with a custom message and photo in both the "Home" and "Subscribe" page templates.
WooCommerce Rewards System
To build customer loyalty and encourage repeat purchase, my clients asked for a system to reward buyers with points for various website actions including signing up, buying a product for the first time, repeat purchase, social referrals, etc. The system rewards each action with different point values.
The redeemable products--which are, in fact, regular WooCommerce products--are not visible anywhere on the site except on the member's account page. Members add a redeemable product to the cart like any other product but can only pay for it using their accumulated points.
A commercial plugin from CodeCanyon manages the rewards system. The plugin addressed most of the project requirements saving us from a lengthy and more expensive development time for what would have been a customized solution. The remaining issues were easily solved by manually modifying the WooCommerce account pages to show the redeemable products and display the member's accumulated points.
Modified WooCommerce Checkout Page
The checkout page needed two major changes. First, there must only be one product in the cart at any time. Second, redeemable products must be payable only with points and not with real currency. Fortunately, WooCommerce is flexible enough that it was fairly easy solve the checkout requirements using WooCommerce's hooks and filters. I custom coded functions to keep only the very last product added to the cart and check whether the product is a box or a rewards product; then, dynamically present the appropriate payment method (PayPal or points).
Above: Tablet view and the custom built panel in the WordPress admin.
I built the Trinquets WooCommerce store using responsive design. The website adjusts easily in smart devices with smaller display screens.
NOTE: This online store is closed.
PUA 2019
I helped the Philippine Urological Association with their annual convention website. Built with WordPress and a custom theme, the website contains not only information about the speakers and events, hotel and tours, but also allows online registration with PayPal payment. The website is hosted under my own web hosting service which I started last year.
2019
Innovative Support Company
I created a bilingual corporate website for a company that provides business services to government institutions and private sectors in Saudi Arabia.
2016
PUA Midyear Convetion 2019
Also built for the Philippine Urological Association, this smaller (compared to PUA 2019) midyear convention website contains information about speakers, a calendar of events, registration form and travel information. The website is built with WordPress and hosted under my hosting service at viganwebhosting.com.
2019
Sukhi's
From Illustrator mockups provided by the client, I built a custom WordPress site for a US company offering packaged Indian food products.
2016
Cortus Capital
I built a bilingual corporate website for Cortus Capital, a private equity company founded in Hong Kong, using WordPress and WPML plugin.
2016
Vida Nutriscience
I built a WooCommerce store for a Vida Nutriscience, Inc., popular PH brand of health and wellness products.
2016
Danton Remoto Tutorial
Web design and WordPress development for Danton Remoto's private tutorial classes, offering Creative Writing, IELTS, TOEFL & SAT, and English & Literature Review.
2020
Deep 6 Carbon
A small yet visually engaging website for Deep 6 Carbon built with WordPress and Elementor Pro.
2022
Learn PERC 2021
Virtual event website made for the biennial Percutaneous and Endoscopic Renal surgery Course of the University of the East Ramon Magsaysay Memorial Medical Center, Inc. Department of Surgery – Section of Urology.
2021
Vivere Azure
A visually engaging resort website, meticulously crafted using WordPress and Elementor Pro, developed to showcase a scenic rest house by the sea in Batangas Philippines.
2022
Back to Top