Select Page

MetOcean Telematics

Screenshot of Metocean site

For this project, I was on-boarded as the junior developer in a team of two. I worked with another developer/designer to create approximately 60 product pages, a sitemap, support page, terms & conditions page, terms of usage and privacy policy. I also assisted with the custom woocommerce front-end of both the cart page and checkout for this website. The website itself is made using a theme called Divi for WordPress and WooCommerce. One challenge was overriding the CSS of the “out-of-the-box” Divi modules and WooCommerce pages. Often this could be achieved with higher CSS specificity however on occasion ( ! important ) was required to override styles.

My main work was within the product pages. Each product had to have its own slightly different page, either because the pricing required a pricing table, a contact us button or simple checkout buttons. The pricing plans had to be nested within a Divi  “Toggle Module” to give the clients desired effect of switching between plan tables. This effect was achieved using the plugin “Simple Divi Shortcode” and then creating shortcodes using the saved pricing plan layout ID (which, when saved, is automatically given an ID number by Divi). The final shortcode is written into the accordion module as [showmodule id=”4567″].

The cart box CSS had to be over-ridden to give a white box background and black border.  The “see price plans” button is linked using a CSS ID to allow the customer to be guided to the price plans at the bottom of the page and each button had to have an individual link to add the specific product to checkout. For this site I wrote approximately 200 lines of custom CSS to override the out of the box features, including media queries to stack products and related products responsively on mobile and tablet (along with their descriptions).

This is my largest project to date and I am extremely proud of the work I achieved and grateful for the support from the senior developer, Morgan.

Website can be found at MetOcean


Posted on

March 4, 2019

Submit a Comment

Your email address will not be published. Required fields are marked *