i have one CSS issue (i hope so). After inserting this CSS by my side:
.owl-item>.product .product-thumbnail>img, .owl-item>.product .wp-post-
image, .products:not(.electro-v1)>.product .product-thumbnail>img,
.products:not(.electro-v1)>.product .wp-post-image {
height: 320px !important;
}
images on shop are alligned properly, but this caused some images to be scretched or distorzed, its not in their natural size.. Can someone to tell me where is my error in my CSS, and what to do to fix it? Many thanks
Yup, you're stretching the image by forcing the height to be 320px. Try applying the height to the wrapper element instead:
.owl-item>.product .product-thumbnail,
.products:not(.electro-v1)>.product .product-thumbnail {
height: 320px !important;
}
You can use this code in functions.php of your theme.
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
Related
I've trying to change the H4 tags from my Footer and Widgets on the WordPress site https://www.thebitesizedbackpacker.com/ into paragraph text, using functions.php.
I tried several codes (implemented through Code Snippets), but no success so far.
I came up with the following base code, but with my limited PHP-knowlegde I could use some help in making this work.
Hope someone can help!
CODE:
add_filter( 'generate_start_widget_title', 'widget_title_start_tag' );
function widget_title_start_tag()
{
return '<span class="widget-title">';
}
add_filter( 'generate_end_widget_title', 'widget_title_end_tag' );
function widget_title_end_tag()
{
return '</span>';
}
I have a plugin called WooCommerce PayPal Payments which allows PayPal payments in WooCommerce. With this plugin, they also have an option for credit card payments. See below:
All of this renders the following on the front end:
Now, I'm trying to change the AMEX logo to a custom logo.
I've seen many articles which show how to change the PayPal logo, such as this one, but haven't seen any that mention how to change the AMEX, MasterCard or other logo.
For example, I've used this hook to change the PayPal logo:
add_filter( 'woocommerce_gateway_icon', 'remove_what_is_paypal', 10, 2 );
function remove_what_is_paypal( $icon_html, $gateway_id ) {
if( 'paypal' == $gateway_id ) {
$paypal_logo = get_template_directory_uri()."/assets/build/vectors/paypal-logo-original.svg";
$icon_html = "<img class='checkoutPage__paypal' src=".$paypal_logo."' alt='PayPal logo'>";
}
return $icon_html;
}
How do I change the AMEX logo?
add_filter('clean_url', 'custom_clean_url', 10, 3);
function custom_clean_url($good_protocol_url, $original_url, $_context) {
if (strpos($good_protocol_url, 'assets/images/amex.svg') !== false) {
return 'https://woocommerce.com/wp-content/plugins/woocommerce-payments/assets/images/cards/amex.svg';
}
return $good_protocol_url;
}
Change the return URL as per the requirement.
There is no filter in the plugin to the cards array to change the icon for individuals. AFAIK this is the only hook that can be used in this situation.
add_filter( 'woocommerce_gateway_icon', 'custom_payment_gateway_icons', 10, 2 );
function custom_payment_gateway_icons( $icon, $gateway_id ){
foreach( WC()->payment_gateways->get_available_payment_gateways() as $gateway )
if( $gateway->id == $gateway_id ){
$title = $gateway->get_title();
break;
}
// The path (subfolder name(s) in the active theme)
$path = get_stylesheet_directory_uri(). '/assets';
// Setting (or not) a custom icon to the payment IDs
if($gateway_id == 'paypal_payment_id')
$icon = '<img src="' . WC_HTTPS::force_https_url( "https://website.com/logo.png" ) . '" alt="' . esc_attr( $title ) . '" />';
return $icon;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Since there is not, apparently, a filter for altering this gateway's html, or specifically the credit card icons, you might have to resort to a CSS kludge.
You could use the following code to hide or cover the AMEX image, and replace it with the same image as pseudo-element background. Replacing it with some different image would be as simple as replacing the background-image url with the one you want to use:
/** CSS KLUDGE VS WOOCOMMERCE PAYPAL PAYMENTS CREDIT CARD ICONS **/
#payment .payment_methods .payment_method_ppcp-credit-card-gateway {
position: relative;
}
#payment .payment_methods .payment_method_ppcp-credit-card-gateway:after {
content: '';
position: absolute;
top: 2px;
left: 205px;
height: 22px;
width: 35px;
background-size: cover;
/* replace URL here */
background-image: url(/wp-content/plugins/woocommerce-paypal-payments/modules/ppcp-wc-gateway/assets/images/amex.svg);
}
#payment .payment_methods .payment_method_ppcp-credit-card-gateway img[title="American Express"] {
display: none;
}
I'd wait to apply the last line, which may not even be necessary, until I'd finished making position and size nudges to get the new image looking just right. Naturally, you'd want to double check against unique theme characteristics and for responsiveness, but anyway there's the concept.
i develop my own plugin for the first time. I have come very far, so far it works very well.
What I would like to program this time is a, color picker. This Color Picker, should change the HEX code in my CSS file.
I already have a color picker in my backend, but how can I program a function now, where I say, write this into the CSS file in the classe.
I hope you have understood my problem. Now you have to save the HEX code somewhere.
Translated with www.DeepL.com/Translator (free version)
You can use the wp_add_inline_style function:
function my_styles_method() {
wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom_script.css');
$color = get_theme_mod( 'my-custom-color' ); // #FF0000
$custom_css = "
.mycolor{
background: {$color};
}";
wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
I'm trying to have a feature where users can change the background image of certain divs via the theme customizer. I've tried many different ways but can't seem to get it to work.
As of right now I have it to where I'm able to change the background of one div but not able to get more than that one.
Function.php file
function meraki_custom_background_cb() {
ob_start();
_custom_background_cb(); // Default handler
$style = ob_get_clean();
$style = str_replace( 'body.custom-background', '#featured-home-image', $style );
echo $style;
}
add_theme_support( 'custom-background',
array(
'wp-head-callback' => 'meraki_custom_background_cb',
'default-color' => '000000',
'default-image' => '%1$s/images/background.jpg',
)
);
header.php file
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #bdd96e; }
</style>
I'm pretty sure what this is doing is just replacing the string 'body.custom-background' with the ID #featured-homeimage', which works great, but only for one div.
Is there a way to make this possible for multiple divs? Thanks in advance for your help.
I have attached a thumbnail image to the post. I have used the following code
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image', 550, 650, true );
}
This is the site URL http://digitalsensebd.com/talking-threads/ .But images go to stretch when the height more than 650px. Please tell me how can I solve the stretch problem.
In main.css line 127, you have the CSS .thumblin-img img { width: 100%; }. If you change that property, or remove it, you will see your picture not stretch.
If you want to preserve the aspect ratio (and make the site responsive) change the CSS to this:
.thumblin-img img {
max-width: 100%;
height: auto;
}
If you're using the featured image you might want to use "set_post_thumbnail_size" instead of "add_image_size":
set_post_thumbnail_size( 550, 650, true );
http://codex.wordpress.org/Function_Reference/set_post_thumbnail_size