1300 335 528
Get A Quote

DEKK WEBSITE 2023 MANUAL

AUGUST 2023

1. INTRODUCTION

The objective of the new DEKK Rubber Tracks website is to have a more modern tool with easy customization and up-to-date technology, aiming for a faster, visually appealing, and secure experience. Additionally, the goal is to provide an enhanced mobile user experience, as mobile devices constitute an average of 76% of all devices used to access DEKK’s information. 

The website serves as a showcase for our products, effectively showcasing our branding while also functioning as a conversion-driven platform to facilitate sales and distribution.

The website follow the trends and standarts from DEKK Corporate Guideline that can be found clicking here: DEKK Corporate Brand Identity Guide.pdf

  

WordPress content management system

A content management system (CMS) is a software application that enables individuals and organizations to create, manage, and publish digital content without requiring in-depth technical knowledge. WordPress is one of the most popular and widely used CMS platforms available.

WordPress provides a user-friendly interface that allows users to easily create and manage various types of content, such as articles, pages, images, videos, and more. It offers a range of features that make it suitable for different types of websites, from personal blogs to complex e-commerce sites and corporate websites.

Key features of the WordPress content management system include:

  • User-Friendly Interface: WordPress offers an intuitive and easy-to-use interface that allows users to create and manage content without the need for coding skills.
  • Themes and Templates: Users can choose from a wide range of pre-designed themes and templates to change the visual appearance of their website. Themes can be customized to match a specific design or branding.
  • Plugins and Extensions: WordPress has a vast ecosystem of plugins and extensions that enhance the functionality of a website. Plugins can add features like contact forms, social media integration, SEO optimization, and more.
  • Content Creation: Users can create and edit content using a built-in text editor called the Gutenberg editor. This editor allows for the creation of visually appealing content with blocks of text, images, videos, and other media.
  • Customization: WordPress provides options for customizing the site’s layout, design, and functionality. Users can adjust settings, fonts, colors, and other elements to create a unique website.
  • SEO-Friendly: WordPress offers tools and plugins to optimize content for search engines, helping to improve a site’s visibility in search results.
  • Responsive Design: Many WordPress themes are designed to be responsive, ensuring that websites look and function well on various devices, such as desktops, tablets, and smartphones.
  • User Management: WordPress allows administrators to create and manage user accounts with different roles and permissions. This is particularly useful for collaborative websites with multiple authors or contributors.
  • Updates and Security: Regular updates help keep the WordPress core software secure and up-to-date. Additionally, various security plugins are available to enhance website security.
  • Blogging Capabilities: Originally developed as a blogging platform, WordPress still offers robust blogging features, including categories, tags, commenting, and RSS feeds.

In summary, WordPress is a powerful content management system that empowers users to create and manage websites efficiently, with a focus on simplicity, flexibility, and extensibility through themes and plugins. Its user-friendly interface and wide range of features make it a popular choice for individuals, businesses, and organizations seeking to establish a strong online presence.

2. SUMMARY

  • Mobile Integration
  • Forms
  • Functions
  • Useful Links and Info
  1.  
 
 

3. COLORS

DEKK website colors
ColorHEX
DEKK Blue#007DC6
Black#000000
Amber#f6a217
White/Grey#F0F0F0

4. FONTS

5. TEMPLATES

  • Cart/Checkout page (cart.php)

This file was updated for a new version in which we have the columns organized as follows:

Quantity / Product Type / Make / Model / Part Number

To achieve this, we made changes to the columns in the HTML/PHP file.

This template is located in the WordPress folder. Please use FTP or Cpanel to find them:

New code backed here: Cart.php 

 

 

  • Header and Footer

woocommece > Templates > Theme Builder

  1. Header
  2. Footer

6. PLUG INS

  • All Parts Finder

The “Parts Finder” is a custom-built native WordPress plugin for DEKK’s new website. The aim of the “All Parts Finder” is to assist the customer in locating the required information. It combines the attributes of make and model to make the product search even more streamlined. Through a joint effort between DEKK and Troppys, we have successfully implemented and ensured the user-friendly customization of this plugin.

ATo check the doecumentation please click here: DEKK parts finder.pdf (Available on Founder Sharepoint)

  • Woocommerce

WooCommerce is an e-commerce plugin developed for WordPress, one of the most popular website creation platforms. While WooCommerce is widely used to set up online stores, it can also be beneficial for a quote collection website, even if it’s not a traditional sales site.

Here are some reasons why WooCommerce could be a good option for your quote collection website:

  1. User-Friendly: WooCommerce is designed to be user-friendly and easy to use, even for beginners. It allows you to set up products (or in your case, services or items for which users need quotes) by intuitively defining prices, descriptions, and images.
  2. Customization: WooCommerce offers various customization options to tailor the appearance and functionality of your site to your needs. You can choose from a variety of themes and plugins to ensure the website design aligns with your brand identity.
  3. Quote Management: Although WooCommerce is an e-commerce platform, it can be configured to accept orders and quotes instead of direct sales transactions. You can create products that represent different types of services or items for which users are requesting quotes. Website visitors can select these products (or services), add relevant details, and request a quote instead of making an immediate purchase.
  4. Control and Tracking: WooCommerce allows you to easily track the received quote requests. You can receive email notifications whenever someone submits a request and manage all the information in a centralized admin panel.
  5. Integration with Payment Gateways: Even though you’re not directly selling products, you can still set up payment options to ensure the seriousness of the quote requests. This can be helpful, especially if you want to charge a small fee for the requested quotes.
  6. Future Scalability: If you decide to expand the website in the future to include direct sales, you’ll already be familiar with WooCommerce and its framework, making the transition to a full e-commerce business model smoother.

In summary, WooCommerce provides a versatile and customizable platform to efficiently manage quote collection on your website. Its user-friendly interface and management features can be adapted to meet the specific needs of your business, even if you’re not conducting direct sales at the moment.

  • Elementor
Plugins > Elementor
 
Elementor for WordPress is one of the most popular and powerful page builders available for the WordPress platform. It is a visual design tool that allows you to create custom pages and layouts intuitively, without requiring technical programming knowledge. With Elementor, users can drag and drop elements such as text, images, buttons, and widgets directly onto the page, making it easy to create attractive and functional designs. It offers a variety of pre-built templates and an extensive widget library, enabling complete customization of colors, fonts, spacing, and styles.
 
Elementor is widely used to:
 
  • Flexible Design: Create custom layouts for pages, posts, portfolios, and other types of content.
  •  Agility: Save time in development, allowing users to quickly create professional designs.
  •  Cost Savings: Eliminate the need to hire a designer or developer for every small layout change.
  •  Full Control: Offer total control over site design, from structure to style details.
  •  Responsiveness: Build responsive designs that automatically adapt to mobile devices and tablets.
  •  Integration with WordPress: Seamlessly integrate with WordPress themes and plugins.
  •  Landing Page Creation: Develop highly optimized landing pages for conversions.
  •  Advanced Customization: Add interactive features, pop-ups, animations, and contact forms.
  •  SEO-Friendly: Enable content optimization for search engines.
 
In summary, Elementor for WordPress is a versatile and valuable tool for effectively creating custom designs, saving time and resources, regardless of your level of technical expertise. It’s a popular choice for bloggers, small business owners, marketers, and developers alike, as it allows the creation of visually appealing and feature-rich websites without the need for deep programming knowledge.
 
  • Quantity Plus Minus Button for WooCommerce by CodeAstrologylementor
Plug in installed to be possible to have a plus/minus button on the cart page. Can be found trough Plugins > Quantity Plus Minus Button or Woocommerce > (+-) Plus Minus button
 

7. MOBILE INTEGRATION

Most of DEKK’s customers use mobile devices. Please check the DEKK Analytics page. The website was designed to function well on both desktop and mobile platforms. For each page, we created a mobile version inspired by the approved desktop version, incorporating different elements that are specifically tailored for mobile screens. While there might be some variation due to screen sizes, we have ensured consistency. Below, you can find an example of our homepage:

DESKTOP VERSION
MOBILE VERSION

8. FORMS

DEKK Website features 3 forms:

  1. Quote: The checkout form sends to the Marketing Team once they’ve selected products for quoting.
  2. Contact Us: The contact form appears after clicking the “Get a Quote” button on the homepage.
  3. Get In Touch: The form is located in the footer section, above the “Brands We Service” area. 
  4. New Newsletter Lead: Leads from the newsletter field located on the footer section.
  5. Recycling From: The Recycling Form can be found on the Responsible Disposal Program page.
  6. Warranty Claim: The warranty Claim Form, can be found on the Warranty page.

 

All these forms are configured to send emails to the DEKK Marketing Team ([email protected]).

To review all submissions, please follow these steps:

WordPress > Elementor > Submissions

9. FUNCTIONS

WordPress functions can be written on PHP or Javascript. Is you create a function using Javascript you can use this way: WordPress > Appearance> Theme File Editor > The Functions. 

Languages: CSS / HTML / JAVASCRIPT

The mobile menu and burger icon menu are integral components of our website’s responsive design, enhancing user experience on smaller screens like smartphones and tablets.

click here to get the code: Burguer Menu

 

  • Change Add to Quote button name:

Languages: CSS / HTML / JAVASCRIPT

This function objective is to change the title of the “Add to Cart” button to “Get a Quote” in the product listing results, you can use the filter woocommerce_product_single_add_to_cart_text together with woocommerce_product_add_to_cart_text. 

Function-code:

custom_woocommerce_product_add_to_cart_text($text) {
$text = ‘Get a Quote’; // Replace ‘Get a Quote’ with your desired button title

return $text;
}
add_filter(‘woocommerce_product_add_to_cart_text’, ‘custom_woocommerce_product_add_to_cart_text’);
add_filter(‘woocommerce_product_single_add_to_cart_text’, ‘custom_woocommerce_product_add_to_cart_text’);

 

  • Change Quote message:

Languages: CSS / HTML / JAVASCRIPT

This function objective is to change the message displayed when you insert any product to the cart. 

Function-code:

function change_add_to_quote_message( $message, $product_id ) {
$product = wc_get_product( $product_id );
$product_name = $product->get_name();
$new_message = $product_name . __( ‘ has been added to your quote.’, ‘woocommerce’ );
return $new_message;
}
add_filter( ‘wc_add_to_cart_message’, ‘change_add_to_quote_message’, 10, 2 );

  • Checkout Button name:

Languages: CSS / HTML / JAVASCRIPT

This function objective is to show a map of the branch region clicked on the side.

click here to get the code: Branches Function

 

Languages: CSS / HTML / JAVASCRIPT

This function objective is to show a map of the branch region clicked on the side.

click here to get the code: Branches Function

 

  • CSS changes:

Languages: CSS:

 
* Product photo display in black background:
.woocommerce ul.products li.product a img {
    background-color: black;
}
 
 
* Hide the message “view cart” after click on Get a Quote button:
.woocommerce a.added_to_cart{
display: none;
}
 
 
*    :
.elementor-message-success {
color: white;
}

 

 
@media (max-width: 767px) {
    .qib-button.qib-button-wrapper {
        margin-left: 150px;
    }
}
 
@media (max-width: 767px)
{
.product-quantity{
margin-top:35px
}
}

10. USEFULL LINKS AND INFO

Product image fit – full image instead of cropped

Sometimes the woo-commerce croping the images automatically. Check out this article on how to set up.

https://wordpress.org/support/topic/product-image-fit-full-image-instead-of-cropped/

BRANDS WE SERVICE

DEKK Rubber tracks and pads
Facebook Linkedin Youtube Instagram

CONTACT US

1300 335 528
Get A Quote

STAY CONNECTED

SIGN UP BELOW TO GET THE LATEST NEWS ON SALES, NEW RELEASES AND MORE!

© COPYRIGHT DEKK RUBBER TRACKS & PADS. ALL RIGHTS RESERVED. POWERED BY TROPPUS IT & MANAGEMENT

CALL 1300 335 528