Skip to main content

Styling WooCommerce Tabs

admin 2 Comments

WooCommerce, an extension for WordPress makes it simple to sell online. What’s a bit painful though is overriding the styles if you’re creating your own theme.

Specifically the tabs, they are painful.

Here’s a small snipper to restyle the woocommerce tabs and take away that rounded look to them.

Manipulate the colours in this code as you see fit. Make sure you place the css after WooCommerce styling.

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
display:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
border-radius:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active
{

background:blue;
color:#fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
background:transparent;

border:0;

a {
padding:1rem;
}
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs
{
border-bottom:1px solid #999
}

Install PDFTk on Ubuntu 18.04 Bionic

admin 1 Comment

pdftk is missing from the official repository right now. That’s an issue for many people.

I needed PDFTK to be installed on Ubuntu (18.04) due to the need to manipulate PDFs. Unfortunately, because I used Laravel Forge, they only allow Ubuntu, and apparently PDFtk is not longer working with Ubuntu 18.04. There is a workaround! Follow the below to get it working.

There’s a workaround here: How can I install pdftk in Ubuntu 18.04 Bionic?

Quick and easy workaround

 

 

UPDATED 8/2/2020

Try sudo snap install pdftk

Set up symlink so it works!

sudo ln -fs /snap/pdftk/current/usr/bin/pdftk /usr/bin/pdftk

The below seems not to work any more.

In SSH on your Ubuntu 18.04 server, do the below:

wget http://archive.ubuntu.com/ubuntu/pool/universe/p/pdftk/pdftk_2.02-4build1_amd64.deb
wget http://archive.ubuntu.com/ubuntu/pool/main/g/gcc-6/libgcj17_6.4.0-8ubuntu1_amd64.deb
wget http://archive.ubuntu.com/ubuntu/pool/main/g/gcc-defaults/libgcj-common_6.4-3ubuntu1_all.deb
sudo dpkg -i pdftk_2.02-4build1_amd64.deb libgcj17_6.4.0-8ubuntu1_amd64.deb libgcj-common_6.4-3ubuntu1_all.deb

Then type ‘pdftk’, it should come up.

Hope that helps!

V-For dynamic buttons spinner in VUE2 – Isolate each button loading spinner (VueJS 2)

admin Leave a comment

If you’re dynamically showing buttons using V-FOR and want each button to show it’s own individual spinner if clicked, watch the below video.

This will show you how to make Vue know dynamically that the specific button has been clicked, using Vue2, Bootstrap and Fontawesome.

Laravel DOM-PDF Error – No block-level parent found. Not good.

admin 2 Comments

I received this error when using a system called FusionInvoice. This relates to DOM PDF which is a Laravel vendor to allow PDFs to be created.

Error said something along the lines of  ‘No block-level parent found. Not good.’.

To fix this error, I went to my file structure and edited /vendor/dompdf/dompdf/dompdf_config.inc.php

Look for:

def("DOMPDF_ENABLE_HTML5PARSER", false);

Replace with:

def("DOMPDF_ENABLE_HTML5PARSER", true);

This should fix the issue

Change Australian mobile numbers to +61 in PHP

admin Leave a comment

Recently, I was using Laravel to build an online ordering system for a restaurant. The website required users to sign up and type in an SMS verification code to activate their account. Using Twilio, we wanting the phone number to come up as the business name instead of a phone number. When signing up though, Twilio required the phone number to be in international format (Eg. +6140122222) instead of 0401222222. So, we faced the dilemma of either using javascript to replace it, or just do it in PHP so that the user will not know any different.

It was really quite easy,

$phone = '0422222222';
$formatted = substr_replace($phone,"+61",0,2);

The phone number will be displayed like +614222222 in the $formatted variable.

Obviously this will work for other countries as well, but might be easier in Australia as we only have one type of mobile number starting with ’04’.

Hope that helps!

WordPress SMTP without any plugins

admin 1 Comment

WordPress is a very good CMS, BUT! I hate plugin bloat. I’ve seen so many websites use a huge amount of plugins to cover every little feature, which contributes to speed issues and can cause problems down the track.

There are heaps of SMTP Plugins for WordPress available so that you can use AMAZON SES , SendGrid, MailGun, etc. The easiest way to set up SMTP is to add this snippet to your functions.php file, this will ensure that WordPress uses SMTP instead of the standard PHP Mail.

Add this to your functions.php file and configure how you need to. Then save it.

// USE SMTP
add_action( 'phpmailer_init', 'setup_phpmailer_init' );
function setup_phpmailer_init( PHPMailer $phpmailer ) {
    $phpmailer->Host = 'HOSTNAME'; // eg. email-smtp.us-west-2.amazonaws.com
    $phpmailer->Port = 587; // could be different
    $phpmailer->Username = 'ENTERUSERNAME'; // SMTP Username
    $phpmailer->Password = 'ENTERPASSWORD'; // SMTP Password
    $phpmailer->SMTPAuth = true; // Set to true if login is required
    $phpmailer->SMTPSecure = 'tls'; // enable if required, 'tls' is another possible value
    $phpmailer->IsSMTP();
}

Hope that helps!

Jquery Date Range – Restrict To and From Dates easily

admin Leave a comment

Recently, I had a request from a client to have a datepicker that restricts dates based on the start date. Using Jquery Datepicker, I created a TO and FROM date, where by:

  • The Start date must be 14 days or more from today
  • The End date must be 7 days after the start date
  • The End date can only be maximum 28 days from today

To do this, I created two fields, one for the start date, one for the end date, then JQUERY did the rest.

To start, download JQUERY UI from here and include it in your project.

<label for="suspstartDatePicker">Start Date</label>
<input type="text" id="suspstartDatePicker" name="suspendfrom" class="form-control-lg" placeholder="Suspend start date">

<label for="suspendDatePicker">End Date</label>
<input type="text" id="suspendDatePicker" name="suspendto" class="form-control-lg" placeholder="Suspend end date">

Then I added Jquery UI Datepicker in the footer of the page, below the JQUERY UI js script.

<script>
$("#suspstartDatePicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
minDate: '+14',
 
 
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
var limit = $(this).datepicker('getDate');
 
date.setDate(date.getDate() + 7); // Add 7 days
limit.setDate(limit.getDate() + 35); // Add 7 + 28 days
 
 
 
$("#suspendDatePicker").datepicker("option", "minDate", date);
$("#suspendDatePicker").datepicker("option", "maxDate", limit);
 
 
$('#suspendDatePicker').val('');
}
});
 
$("#suspendDatePicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
multidate: true,
 
});	
</script>

Hope this helps!

Complete installation and set up tutorial for Sendy with Amazon SES

admin Leave a comment

Sendy is an affordable alternative to using the likes of Mailchimp, Campaign Monitor and other cloud based email marketing tools. If you find that you are sending thousands of emails per month and are looking to reduce your spending on email marketing, Sendy is your answer. Sendy isn’t necessarily as aesthetically pleasing and easy to use as some of the cloud solutions, but it is a self hosted solution which requires a one time fee (currently $59 USD) – it then uses Amazon SES to send emails and currently Amazon SES charges $0.10 per 1000 emails. Cool Huh?

Watch the below video and learn how to set it up completely.

Find out more about Sendy & Purchase

Simple WordPress User Restriction Tutorial without using Plugins

admin Leave a comment

When you need to restrict users in WordPress, there are heaps of plugins you can download. Personally, I think too many plugins is a bad practice in WordPress, it can lead to “plugin bloat”, where your website can be slowed down and you’re reliant on too many plugins to make your site work.

In the video below, you will see how I manage user restrictions quite easily using a must use plugin in WordPress and a few minutes of my time.

Read More