[MOOD BOARD] – Floral Web Design

I’d like to share a list of Dribbble/Behance design links that inspire me with my floral web design project last week. And also a list of elements that makes it as my design inspiration.

mini5.png

Link: https://dribbble.com/shots/3559893-plant-database-app

  1. Typography
  2. How she display the photos
  3. Minimalism

camellia.jpg

Link: https://dribbble.com/shots/3496380-Camellia

  1. Spacing
  2. Typography – I love how the heading titles except the body font.
  3. Watercolor background effect
  4. Color Palette

Screen Shot 2017-11-06 at 11.12.44 AM.png

Link: https://dribbble.com/shots/2587156-What-Makes-You-Special-Guglieri-com

  1. Centered content
  2. Off the grid navigation
  3. Typography

Screen Shot 2017-11-06 at 11.13.36 AM.png

Link: https://dribbble.com/shots/3011347-Luminous-Magazine

  1. Overlapping elements (title, photo, and button)
  2. Spacing
  3. Typography

attachment1.png

Link: https://dribbble.com/shots/3489204-Flower-App

  1. Slider Navigation
  2. Icons

web_site_flowers_shop_category_page.png

Link: https://dribbble.com/shots/3708282-Florist-Website-Interactions

  1. The Pinterest-like photo grid
  2. Sidebar (which it displays the list of tags — I think)

flowers___desktop_2x.jpg

Link: https://dribbble.com/shots/3195768-Sell-with-Shopify-More-Paid-Landers

  1. The petals and the flower
  2. Subscription box placement
  3. Wavy hero wrapper

f0b06e58136799.59f0bdc8c1695.png

Link: https://www.behance.net/gallery/58136799/Freesia-Atelier-artistic-florist-ecommerce-website

  1. Word emphasis
  2. Well curated photos
  3. Off the grid display of the recent products
Advertisements

How To Display Woocommerce Featured Products Without Shortcode

Currently,  I’m working a custom WordPress theme that’s integrated with Woocommerce.  My first objective is to construct a custom HTML structure in displaying featured products and so my problem was creating a custom loop for it.

My solution: I just searched the PHP function from the Woocommerce plugin to where they created their query for featured products:[project/wp-content/plugins/woocommerce/includes/class-wc-shortcodes.php]

I also included on how I display the following product information (this should be inside the foreach loop or while loop:

  1. Image
  2. Product Title
  3. Product Excerpt
  4. Single Product Page Link

Image:

$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
$src = $image[0];

Product Title:

$post->post_title;

Product Excerpt:

$post->post_excerpt;

Single Product Page Link:

$post->guid;

This is the snippet code for fetching featured products:

$atts = shortcode_atts( array(
 'per_page' => '2',
 'columns' => '2',
 'orderby' => 'date',
 'order' => 'asc',
 'category' => '', // Slugs
 'operator' => 'IN', // Possible values are 'IN', 'NOT IN', 'AND'.
 ), $atts, 'featured_products' );

 $meta_query = WC()->query->get_meta_query();
 $tax_query = WC()->query->get_tax_query();
 $tax_query[] = array(
 'taxonomy' => 'product_visibility',
 'field' => 'name',
 'terms' => 'featured',
 'operator' => 'IN',
 );

 $query_args = array(
 'post_type' => 'product',
 'post_status' => 'publish',
 'ignore_sticky_posts' => 1,
 'posts_per_page' => $atts['per_page'],
 'orderby' => $atts['orderby'],
 'order' => $atts['order'],
 'meta_query' => $meta_query,
 'tax_query' => $tax_query,
 );

 $featured = new WP_Query($query_args);
 $featured = $featured->posts;
 foreach( $featured as $product ){
    // display product info here
 }wp_reset_query();