Catalogue

Overview

Display your products or services quickly using the catalogue element. Add a little description and pricing for each product and link it to a page with more information, it is that easy!.

head over to our online demo for some stunning demos of the catalogue.

Code Snippets

How to use the snippets?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_catalogue admin_preview_bg='' av_uid='av-mwrgyn']
[av_catalogue_item title='Sesame crusted scotch fillet' price='7.50$' id='866' link='lightbox' target='' av_uid='av-mshbkv']
with honeyed Pedro Ximenez sauce and potato cake
[/av_catalogue_item]
[av_catalogue_item title='Roast Rack of Lamb' price='7.50$' id='869' link='lightbox' target='' av_uid='av-mmdjjj']
with herb crust and fruity mesclun salad and straw potato
[/av_catalogue_item]
[/av_catalogue]

Customization

It is easy to apply custom code and customize the elements if we can target specific element class names. Please enable custom CSS class name support from Enfold theme options > Layout Builder and apply a custom class name “my-custom-catalogue” to the catalogue element for the code to work well.

Thumbnail

Size

Increase the thumbnail size in the catalogue list by adding the below code to your site.



/* Thumbnail size */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-image {
    width: 140px;
    height: 140px;
}

Shape

Change the default round thumbnails to a square.




/* Thumbnail shape */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-image {
     border-radius: 0;
}

Hover style

Add custom hover style to the thumbnail image using the below code.



/* Thumbnail on hover */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li:hover .av-catalogue-image {
	transition: all .15s cubic-bezier(0, .86, .85, .96);
     height:100px;
     width: 100px;
}

Title

Font style (color, size, font family)

To custom style the catalogue title, we can use the below CSS



/*  Catalogue title text */

.my-custom-catalogue.av-catalogue-container .av-catalogue-list li .av-catalogue-title {
    color: #7d3f98;
    font-size: 1.35em;
    letter-spacing: .05em;
    line-height: 1.2em;
    text-transform: none;
}

Hover style

Change the title color or to custom style the catalogue title on hover, please add the below CSS to your site.



/*  Title styles on hover */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li:hover .av-catalogue-title {
    color: #7d3f98;
    text-transform: none;    
}

Add an icon before the title

Add the below code to your site to display an icon before the catalogue titles. To change the icon please update the icon Unicode.



/* Icon before title */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-title:before {    
    content:"\e8c0";
	font-family: 'entypo-fontello';	
	position: absolute;
	left: 0;
	top: 50%;
    transform: translateY(-50%);
}


.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-title {
	padding-left: 30px;
}

Description

Font style (color, size, font family)

To custom style the catalogue description, please use the below CSS code in your website.



/*  Catalogue description text */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-content {
    color: #7d3f98;   
}

Hover style

Change the description text style on mouse hover by adding the below CSS to your site.



/*  Title styles on hover */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li:hover .av-catalogue-content {
    color: #7d3f98;   
}

Price

Font style (color, size, font family)

Change the font style of catalogue price by using the below CSS selectors.




/* Price*/

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-price {
    color: gold;
    font-weight: bolder;
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
}

Hover style

Change the font style of catalogue price on mouse hover with the below CSS selectors.




/* Price*/

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li:hover .av-catalogue-price {
    color: red;
}

Add multiple prices

To display multiple pricing or a price range of a catalogue item, just enter both the values “34.99$ – 54.99$ ” in the price field.

Catalogue list style

Height

Increase the height of each list item in the catalogue and vertically center its content.



/* Catalogue list item  */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li {    
    min-height: 200px;
    display: flex;
    align-items: center;
}

Width

The catalogue element takes up 100% width of its parent element. To adjust the width of the catalogue item simply place it inside the desired column.

Background color

Change the background color of the list items using the below CSS



/* List item background */
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li {    
    background: gold;
}

Alternate background

Add alternate background color to the catalogue list items.



/* CSS - List item background */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li:nth-child(odd) {    
    background: gold;
}

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li:nth-child(even){    
    background: silver;
}

Border

To remove the border or to add your own custom styles to the catalogue list items please use the below CSS.

Add box shadow effect to the same selector to give a shadow effect.



/* List item border */
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li {    
    border: none;
}

Hover

To add a background color or any other effect on hover please use the below CSS




/* List item on hover */
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li:hover {    
    background: gold;
}

Alignment

Stack and center align the catalogue items

Center align catalogue contents like thumbnail, title and description usng the below code



/* CSS -  Catalogue center align */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-image,
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-title,
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-content, 
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-price {
	display: block;
	float: none !important;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 0;
}

Stack items and align to the left

Stack the catalogue items and align to the left using the below code



/* CSS -  Catalogue left align */

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-image,
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-title,
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-content, 
.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-price {
	display: inline-block;
	float: none !important;
	margin: 0 auto;
	text-align: left;
	position: relative;
	padding: 0;
}

.av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-price {
	margin-left: 10px;
}

Resource

Contributed video:

Catalogue Element Tutorial