moblog uk

Tonytemplates's moblog

by Tonytemplates

user profile | dashboard | Tonytemplates maps

rss rss feed

Add WooCommerce Product Size and Color Options with images

(viewed 77 times)
Any product is more attractive to a customer when it has not one image. Especially when you search for some clothes, bag, shoes etc.
Also when you choose among options in some product you prefer to see an image of the desired colour option. And the last thing when you choose clothes is the most popular colours and sizes. For example, some shoe sizes can be sold quickly. The same situation with the clothes colours. So, a client wants to see on a site what sizes and what colours are left and which ones are is already absent.
As many popular cms eCommerce system WordPress with Woocommerce plugin provides such useful functionality by default.
We recommend always to update WordPress itself and WooCommerce plugin to the latest version. Some new options can be added or/and bug fixes in it. On the moment of current article writing and publishing the current WooCommerce version is 3.4.5.

So, follow steps to create and add the Sizes and Colors Attributes:
1) Create an attribute in admin
Create the Color Attribute firstly. Go in admin left panel: Products -> Attributes -> add new attribute.

Read the full article here
3rd Jan 2019, 09:52   | tags:comments (0)

RTL Functionality in WordPress

(viewed 85 times)
RTL functionality is “must have” feature in all current cms. There are a few languages with right-to-left reading but there a lot of people which use these languages.
If you use some of the default WordPress themes RTL functionality is already arranged in them. You don’t have to create specific files and write any code. The file is rtl.css in the theme’s folder.
How to check how your theme looks in RTL without language with RTL reading installing.
1) you can use specific plugin developed for such purposes – RTL Tester – All manuals can be found there.

2) faster way is to set some of RTL languages in the admin panel. Go in admin left menu: Settings -> General -> Site Language.

Screenshot 1.
Advice: remember positioning of menu items in admin left panel. Because after RTL set you will see all reflected as in a mirror. That is looked unusual for people which don’t use languages with right-to-left functionality.
RTL in a custom theme arrangement
For example, there can be such two ways to add RTL CSS styles in your theme. For sure, there can be more ways to do this. We don’t pretend that current article is the only rule. Please, keep in mind that current advice about how to work with RTL is based on own experience only.
1) Separate files for ltr and RTL.
you add the main CSS for ltr mode which is replaced by RTL file correspondingly in RTL mode.
To do this you have to transform your CSS style by changing in it CSS properties word left to right and vice versa. For example, margin-left: to margin-right:, text-align: left to text-align: right etc.
But don’t be afraid – you don’t have to make such changes manually by a list a ton of CSS styles. To such automatic purposes, for example, such an online resource can be used –
And again there two (and, maybe, more) ways to make replacement of some CSS with it RTL analog.
1-1) replace one file by other using WordPress hooks:
wp_enqueue_style( ‘themeslug-style’, get_stylesheet_uri() );
wp_style_add_data( ‘themeslug-style’, ‘RTL’, ‘replace’ );
To use such hooks you have first to create both files and upload them in the same path by naming them as, for example,
1-2) add condition using WordPress default function is_rtl ():
if ( is_rtl () ) {
wp_enqueue_style(‘yourtheme-css-rtl’, get_template_directory_uri(). ‘/css/yourtheme-css-rtl.css’, array(), false, ‘all’ );
} else {
wp_enqueue_style(‘yourtheme-css’, get_template_directory_uri(). ‘/css/yourtheme-css.css’, array(), false, ‘all’ );
The disadvantage of such method is when you have to make the change in theme’s view, for example, change some color of some block you have to open both files – main and rtl – and place changes in them. This is so because you have separate files for both versions. And if you change some color – it has to be seen in both versions.
2) Adding specific RTL file.
This file will be used only after RTL mode activating. Almost all css styles will be located in the main – yourtheme-css.css file.
And styles only for rtl will be placed in – yourtheme-css-rtl.css file.
The disadvantage of this way is manual css arrangement because RTL file hasn’t contain the same code as the main file but only specific for RTL code. To do this quickly you can also use online RTL creating service to have full RTL file. And later leave in RTL file only changed code. All doubled css has to be removed.
The advantage of such method is you don’t have to place changes in both files if you need to add some general css, for example, like color, width etc. You make changes in the main file only, and RTL version will also have such changes because it used both files.
So, to choose which method is more optimal you should analyse sizes of your css files, how often your theme will be changed, site optimisation after development finishing etc.

2nd Jan 2019, 14:10   | tags:,comments (0)

15 Web Design Trends 2018

(viewed 204 times)
The importance of establishing and curating a well-designed website in today’s internet-dominated global climate is hardly a secret.
A strong online presence is a prerequisite to a blooming business enterprise, but just what marks the difference between a page that does little more than take up a domain name and a conversion optimized powerhouse?
This fundamental difference seems difficult for some business owners to grasp – a common misconception is that as long as the end result has visual appeal, the rest will come on its own. The reality is much more complex – a few pretty graphics and a font to match do not a website make. A company’s web page is often the first place a potential customer interacts with a brand and there’s an entire science behind utilizing various design elements in order to leave a positive impression, increase engagement and drive conversion rates. This is reflected in the newest website design tendencies. While there are many approaches to successful web design, some definitive trends have emerged.
To learn more about the most interesting web design trends 2018 has to offer, check out our infographic below for key web design facts, stats and components:

2nd Jan 2019, 13:29   | tags:comments (0)