Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › Additional CSS Styles for Extra Short Codes
Tagged: css, CSS custom, fancy 3, shortcode, Styles
- This topic has 10 replies, 4 voices, and was last updated 11 years, 3 months ago by admin.
-
AuthorPosts
-
July 4, 2010 at 5:20 pm #1452gamehermitMember
Hi Ivy & Amin,
I’m really enjoying working with the cart….great work! I have a question for you…
I am currently using [wp_eStore_category_products_fancy3 id=1] to display products categorically in grid format (displays 3 products per row)….this is working great! But I have a few categories with quite a few products so I would like to display them with 4 products per row. If I change the CSS to padding-left: 0px; and padding-right: 2px I get 4 products per row perfectly….but that changes the [wp_eStore_category_products_fancy3 id=1]. What I need to do is make a duplicate of [wp_eStore_category_products_fancy3 id=1] and give it a name like [wp_eStore_category_products_fancyCustom id=1] or something. This will allow me to choose between displaying 3 products or 4 products per row. I just don’t know how to add the additional style to the Extra Short codes Plugin. Can you please help me with this?
Thanks,
Jack
July 5, 2010 at 9:59 am #22205amin007ParticipantThis means you will have to introduce a new shortcode for it too. If you are okay with writing PHP code then I can give you some hints.
July 7, 2010 at 2:10 am #22206gamehermitMemberThanks Amin….I’ve never written php scripts before but I’m willing to try. I was going through the extra short code plugin and was trying to see all the sections where [wp_eStore_category_products_fancy3 id=1] sections were but couldn’t get a duplicate to work.
Jack
July 8, 2010 at 12:03 am #22207amin007ParticipantIf you have never written PHP scripts then this could seem a little complex so I am going to give you the code that you can copy and paste to get going. We are going to call this new display Fancy 3 New (it’s an exact copy of fancy 3 original but you can change the CSS of this one without affecting the original one)
Copy the following bit of code and add it to the “eStore_extra_shortcode_css.css” file:
/*=== Fancy 3 new css ===*/
.eStore-fancy3new {display:block; float:left; padding-right: 25px; padding-bottom:10px; width:139px;}
.eStore-fancy3new-thumb img {height: 125px; width: 125px; border: 5px solid #ccc;}
.eStore-fancy3new-thumb a img {border: 5px solid #ccc;}
.eStore-fancy3new-thumb:hover img {border-color: #333;}
.eStore-fancy3new-footer{text-align:center;}
.eStore-fancy3new-price-tag{font-size: 120%;color: #7A7A7A;}Copy the following bit of code and add it to the “eStore-extra-shortcodes.php” file:
add_shortcode('wp_eStore_fancy3new', 'wp_eStore_fancy3new_handler');
function wp_eStore_fancy3new_handler($atts) {
extract(shortcode_atts(array(
'id' => 'no id',
), $atts));
return show_wp_eStore_fancy3new($id);
}
function show_wp_eStore_fancy3new($id,$button_type=1,$clear=true)
{
global $wpdb;
$products_table_name = WP_ESTORE_PRODUCTS_TABLE_NAME;
$ret_product = $wpdb->get_row("SELECT * FROM $products_table_name WHERE id = '$id'", OBJECT);
if($clear)
{
$output .= '<div class="eStore-fancy-clear"></div>';
}
$output .= '<div class="eStore-fancy3new">';
$output .= '<div class="eStore-fancy3new-thumb">';
$output .= eStore_extra_get_fancy_thumb_code($ret_product);
$output .= '</div>';
$output .='<div class="eStore-fancy3new-footer">';
if(!empty($ret_product->product_url))
{
$output .= '<a href="'.$ret_product->product_url.'"><i>'.$ret_product->name.'</i></a>';
}
else
{
$output .= '<i>'.$ret_product->name.'</i>';
}
$output .= '<br /><div class="eStore-fancy3new-price-tag"><strong>'.ESTORE_PRICE.': '.WP_ESTORE_CURRENCY_SYMBOL.$ret_product->price.'</strong></div>';
if($button_type==1)
$output .= get_button_code_for_element($ret_product);
else if ($button_type==2)
$output .= print_eStore_buy_now_button($id);
else if ($button_type=)
$output .= print_eStore_subscribe_button_form($id);
else if ($button_type==4)
$output .= eStore_show_download_now_button($id);
$output .= '</div></div>';
if($clear)
{
$output .= '<div class="eStore-fancy-clear"></div>';
}
return $output;
}That should do it.
July 9, 2010 at 2:57 am #22208gamehermitMemberHi Amin and thanks for the help. Sorry for the delay….work’s been a bit hectic. I added the code to the eStore_extra_shortcode_css.css and to the eStore-extra-shortcodes.php. But when I add [wp_eStore_fancy3new id=1] to the page no products show up….only “[wp_eStore_fancy3new id=1]” in text. Below is the php file….did I do something wrong?
Thanks,
Jack
[admin deleted code]
July 9, 2010 at 3:11 am #22209gamehermitMemberAlmost forgot….here’s the css code:
[admin deleted code]
July 10, 2010 at 1:28 am #22210amin007ParticipantIt’s a little hard to debug code when it’s on plain text
I will send you a file with the code in it.
July 10, 2010 at 1:52 am #22211gamehermitMemberAwesome…thanks Amin!
July 10, 2010 at 11:29 am #22212gamehermitMemberHi Amin…I just replied to your email.
Thanks,
Jack
September 5, 2013 at 8:49 pm #22213ellie123MemberHi there – would it be possible to post the final result here so we can try this? Or is there a better way to do this now?
Thank you
September 6, 2013 at 12:49 am #22214adminKeymasterPlease explain exactly what change/customization you are after.
-
AuthorPosts
- You must be logged in to reply to this topic.